/* Shared interactions for every page (owner request, Oct 2026). Loaded last, so these rules win over older per-page
   hover styles. Disabled buttons, danger buttons, Google's own button and close buttons are left alone. */

/* ---- Button hover inversion: white buttons turn black, black buttons turn white, with a 1px edge in the
   opposite colour so the button stays visible after it flips. Plain colours (no gradients) so the change
   fades smoothly instead of snapping. ---- */
:is(.primary,.hero-primary,.price-cta.is-primary,.access-continue,.success-home):not(:disabled):not([aria-disabled="true"]):not(.is-blocked):not(.danger){
  background:#f2f2f2!important;background-image:none!important;color:#111!important;border:1px solid #f2f2f2!important;filter:none!important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
:is(.primary,.hero-primary,.price-cta.is-primary,.access-continue,.success-home):not(:disabled):not([aria-disabled="true"]):not(.is-blocked):not(.danger):is(:hover,:focus-visible){
  background:#000!important;color:#fff!important;border-color:#f2f2f2!important;box-shadow:none!important;
}
/* Black buttons (dark background, light text), including the slideshow's arrows. */
:is(.ghost,.price-cta:not(.is-primary),.plans-back,.thread-action,.carousel-controls>button):not(:disabled):not(.danger):not(.close-x):not(.thread-back),
:is(.buttonrow,.modalfooter)>button:not(.primary):not(.danger):not(:disabled){
  background:#111!important;background-image:none!important;color:#eee!important;border:1px solid #ffffff2e!important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
:is(.ghost,.price-cta:not(.is-primary),.plans-back,.thread-action,.carousel-controls>button):not(:disabled):not(.danger):not(.close-x):not(.thread-back):is(:hover,:focus-visible),
:is(.buttonrow,.modalfooter)>button:not(.primary):not(.danger):not(:disabled):is(:hover,:focus-visible){
  background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:0 0 0 1px #ffffff!important;
}
/* Text and icons inside follow the button's colour in both states. */
:is(.primary,.hero-primary,.price-cta,.access-continue,.success-home,.ghost,.plans-back,.thread-action,.carousel-controls>button,.buttonrow>button,.modalfooter>button):not(.danger):not(.close-x) :is(span,b,svg,small,strong){color:inherit!important}

/* ---- Arrow nudge: a call-to-action's arrow slides a few pixels the way it points while hovered. ---- */
.cta-arrow{display:inline-block;transition:transform .2s ease}
/* The arrow moves when its button or link is hovered, or the whole card it sits in (homepage feature cards).
   Scroll to Explore's arrow, the header's Start Free Trial arrow (inside its circle) and the certificate
   carousel's arrows stay still (owner choice); those keep their colour flip. */
:is(button,a,.capability-card,.orbit-option,.home-steps article):not(.hero-scroll):not(.home-open):not(.cert-step):is(:hover,:focus-visible) .cta-arrow{transform:translateX(4px)}
:is(button,a,.capability-card,.orbit-option,.home-steps article):not(.hero-scroll):not(.home-open):not(.cert-step):is(:hover,:focus-visible) .cta-arrow.is-diagonal{transform:translate(3px,-3px)}
:is(button,a,.capability-card,.orbit-option,.home-steps article):not(.hero-scroll):not(.home-open):not(.cert-step):is(:hover,:focus-visible) .cta-arrow.is-back{transform:translateX(-4px)}
/* Arrows move only when the button opens another page; an action (Calculate, Request, Upgrade, slideshow steps) keeps
   its arrow still (owner rule, Oct 19, 2026). */
.arrow-still .cta-arrow{transform:none!important}

/* ---- Close buttons: one round outlined X everywhere. ---- */
.close-x{display:grid!important;place-items:center;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;
  border-radius:50%!important;background:transparent!important;border:1px solid #ffffff1f!important;color:#bbb!important;font-size:20px;line-height:1;cursor:pointer;
  transition:color .2s ease,border-color .2s ease!important}
.close-x:is(:hover,:focus-visible){color:#fff!important;border-color:#ffffff40!important}
.close-x{font-size:0!important;line-height:0!important}
.close-x svg{display:block;flex:none;margin:0!important}
.close-x.is-small{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;font-size:16px}

/* ---- Click ripple (ripple.js): a thin ring where you click empty space; never blocks clicks. ---- */
.click-ripple{position:fixed;left:0;top:0;width:56px;height:56px;margin:-28px 0 0 -28px;border:1px solid #ffffffb3;border-radius:50%;pointer-events:none;z-index:2147483646;
  transform:translate(var(--ripple-x),var(--ripple-y)) scale(.15);opacity:.9;animation:click-ripple .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes click-ripple{to{transform:translate(var(--ripple-x),var(--ripple-y)) scale(1.6);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .click-ripple{display:none}
  .cta-arrow{transition:none}
  :is(button,a,.capability-card,.orbit-option,.home-steps article):not(.hero-scroll):is(:hover,:focus-visible) .cta-arrow{transform:none}
}

/* ---- Continue with Google: Google's own white button turns into Google's official dark version on hover
   (#131314, light text, grey edge), keeping the coloured G. ---- */
#workspace-access .access-google{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
#workspace-access .access-google:is(:hover,:focus-visible){background:#131314;color:#e3e3e3;border-color:#8e918f}