/*
 * Genyleap cross-browser n=4 superellipse controls.
 *
 * The JS contour renderer owns the geometry. CSS owns presentation:
 * the clipping boundary is identical in default/hover/active/focus states,
 * and sharp rectangular borders cannot show through on hover.
 *
 * Do not apply this to circular controls or complex overflow surfaces.
 */
.is-superellipse-clipped {
  /* Geometry is applied inline only after reading the authored CSS radius. */
  corner-shape: round !important;
}

/* A native rectangle border extends beneath a mathematically clipped
   superellipse. Keep it transparent on filled controls and whenever the
   pointer or keyboard state changes, so no rectangular edges appear. */
.is-superellipse-clipped.button:not(.button-ghost):not(.button-outline),
.is-superellipse-clipped.buy-geny-nav,
.is-superellipse-clipped.docs-btn:not(.docs-btn-outline) {
  border-color: transparent !important;
}
.is-superellipse-clipped:is(:hover, :active, :focus-visible) {
  border-color: transparent !important;
}

/* Native focus outlines get cut by clip-path. Provide an inner ring that
   remains visible and follows the same clipped contour on every engine. */
.is-superellipse-clipped:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--primary, #1dbc84) !important;
}

/* Preserve distinct contrast for outlined ghost actions on hover without
   drawing a straight-corner border over the superellipse. */
.is-superellipse-clipped.button-ghost:hover {
  background-color: color-mix(in srgb, var(--primary, #1dbc84) 8%, var(--paper, #121519));
}

/* Rounded icon-only action buttons keep their established native shape. */
.is-superellipse-rounded-fallback:not(.is-superellipse-clipped) {
  -webkit-clip-path: none;
  clip-path: none;
}

@media (prefers-reduced-motion: reduce) {
  .is-superellipse-clipped {
    transition-duration: 0s !important;
  }
}

/*
 * v3 — flat primary CTAs.
 *
 * experience.css has higher-specificity :hover selectors that reintroduce
 * a green 1px border and box-shadow (!important). The former paints as a
 * thin rectangular rim under the clipped n=4 outline at browser zoom.
 * This selector intentionally outranks those rules, including on hover.
 * Keep the background/color states owned by the existing theme.
 */
.button.is-superellipse-clipped:not(.button-ghost):not(.button-dark):not(.button-danger),
.button.is-superellipse-clipped:not(.button-ghost):not(.button-dark):not(.button-danger):is(:hover,:active) {
  border: 0 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  box-shadow: none !important;
}
.button.is-superellipse-clipped:not(.button-ghost):not(.button-dark):not(.button-danger):focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--primary, #1dbc84) !important;
}