/* neil-button.css - the 9-detail pill button. Add class "nb" to a <a>/<button>.
   Markup: <a class="nb" href="#">Continue <span class="nb-arrow" aria-hidden="true">&rarr;</span></a>
   Variants: nb--ghost (secondary). Tokens below override per site. */
:root{
  --nb-ink:#0b0b0d; --nb-paper:#f4f4f1; --nb-signal:#ff3b30; --nb-glow:rgba(255,255,255,.28);
  --nb-font:inherit;
}
.nb{
  --mx:50%; --my:50%;
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  min-height:44px; padding:0 1.4em; border:1px solid transparent; border-radius:999px;
  font:600 1rem/1 var(--nb-font); letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  background:var(--nb-paper); color:var(--nb-ink); overflow:hidden; isolation:isolate;
  transform:translate(var(--tx,0px),var(--ty,0px));
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.nb::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--nb-signal);flex:none}
.nb::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;
  background:radial-gradient(120px circle at var(--mx) var(--my),var(--nb-glow),transparent 70%)}
.nb-arrow{display:inline-block;transition:transform 350ms cubic-bezier(.2,.8,.2,1)}
.nb--ghost{background:transparent;color:var(--nb-paper);border-color:rgba(255,255,255,.22)}
.nb:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
.nb:focus-visible{outline:2px solid var(--nb-signal);outline-offset:3px}
.nb[disabled],.nb[aria-busy="true"]{opacity:.6;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .nb:hover::after{opacity:1}
  .nb:hover .nb-arrow{transform:rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){
  .nb,.nb-arrow,.nb::after{transition:none}
  .nb:hover .nb-arrow{transform:none}
}