/* Shared button feel for every page: a soft resting shadow, a lift on hover, and a light
   sweep across the face. Loaded after each page's own styles so the colors stay per page. */
.btn, .cta a, .lookup button, .copy, .toc a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(20, 24, 41, .08), 0 6px 14px -10px rgba(20, 24, 41, .5);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s cubic-bezier(.2, .7, .2, 1), background-color .25s, color .25s, border-color .25s, filter .25s;
}
/* the highlight: a soft band of light that crosses the button once on hover */
.btn::after, .cta a::after, .lookup button::after, .copy::after, .toc a::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-130%);
  pointer-events: none;
}
.btn:hover, .cta a:hover, .lookup button:hover, .copy:hover, .toc a:hover,
.btn:focus-visible, .cta a:focus-visible, .lookup button:focus-visible, .copy:focus-visible, .toc a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20, 24, 41, .08), 0 14px 26px -12px rgba(20, 24, 41, .55);
}
.btn:hover::after, .cta a:hover::after, .lookup button:hover::after, .copy:hover::after, .toc a:hover::after {
  transform: translateX(130%);
  transition: transform .75s cubic-bezier(.3, .6, .2, 1);
}
/* outline buttons pick up a wash of their own color */
.cta a:not(.primary):hover, .toc a:hover, .copy:not(.done):hover {
  background-color: color-mix(in srgb, currentColor 8%, #fff);
}
.cta a.primary:hover, .btn.primary:hover, .lookup button:hover { filter: brightness(1.07); }
/* pressing settles the button back down */
.btn:active, .cta a:active, .lookup button:active, .copy:active, .toc a:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(20, 24, 41, .12);
  transition-duration: .08s;
}
@media (prefers-reduced-motion: reduce) {
  .btn, .cta a, .lookup button, .copy, .toc a { transition: background-color .2s, color .2s, box-shadow .2s; }
  .btn:hover, .cta a:hover, .lookup button:hover, .copy:hover, .toc a:hover,
  .btn:focus-visible, .cta a:focus-visible, .lookup button:focus-visible, .copy:focus-visible, .toc a:focus-visible { transform: none; }
  .btn::after, .cta a::after, .lookup button::after, .copy::after, .toc a::after { display: none; }
}
@media print {
  .btn, .cta a, .copy, .toc a { box-shadow: none; }
}