/*
 * Shared tactile contract for public-facing CTAs.
 * Page styles retain ownership of color, size and layout; this layer only
 * standardizes depth and interaction geometry.
 */
:root {
  --public-button-depth: #1849BB;
  --public-button-neutral-depth: color-mix(in srgb, #ffffff 58%, #64748b 42%);
  --public-button-danger-depth: #991b1b;
  --public-button-shadow: none;
  --public-button-shadow-hover: none;
  --public-button-shadow-active: none;
}

/* The iOS bridge inserts Apple's system artwork into this button. Keep its
   white face while matching the surrounding auth controls' rounded depth. */
html:root body.external-page:is(.tw-login, .tw-register) button.sapiverse-apple-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 solid transparent !important;
  border-bottom: 4px solid #d1d5db !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  overflow: hidden;
  transform: none !important;
  filter: none !important;
}

html:root body.external-page:is(.tw-login, .tw-register) button.sapiverse-apple-button > img {
  display: block;
  width: 100%;
  height: 44px;
  flex: 0 0 100%;
}

html:root body.external-page:is(.tw-login, .tw-register) button.sapiverse-apple-button:active:not(:disabled) {
  border-top: 3px solid transparent !important;
  border-bottom-width: 1px !important;
}

html:root body.external-page:is(.tw-login, .tw-register) button.sapiverse-apple-button:focus-visible {
  outline: 3px solid var(--accent-1, #2f6bff);
  outline-offset: 3px;
}

/* Public actions are deliberately matte. Keep only the darker lower tactile
   edge; gradients, side rails and inset highlights read as unwanted gloss. */
html:root body.external-page {
  --site-control-rest-shadow: none;
  --site-control-hover-shadow: none;
}

html:root body.external-page :is(
  .btn-primary,
  .btn-oldprimary,
  .btn-register,
  .btn-enter,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .mobile-register-btn,
  .mobile-auth-buttons .btn-enter,
  .navbar .btn.btn-primary
) {
  --public-button-shadow: none;
  --public-button-shadow-hover: none;
  --site-control-rest-shadow: none;
  --site-control-hover-shadow: none;
  background-image: none !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
) {
  --public-button-local-depth: var(--public-button-depth);
  box-sizing: border-box !important;
  /* Paint the surface beneath the transparent pressed spacer as well. This
     keeps the rounded top and side edges continuous while the depth collapses. */
  background-clip: border-box !important;
  border-radius: 14px !important;
  border-top-width: 0 !important;
  border-bottom-width: 4px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--public-button-local-depth) !important;
  box-shadow: var(--public-button-shadow) !important;
  transform: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    filter 160ms ease,
    transform 120ms ease !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  .btn-secondary,
  .btn-cancel,
  .btn-manage,
  .btn-close,
  .btn-google-login,
  .social-google-btn,
  .mobile-login-btn,
  .navbar .btn-login,
  .mobile-auth-buttons .btn-login,
  .cct-btn-ghost,
  .cct-btn-secondary
) {
  --public-button-local-depth: var(--public-button-neutral-depth);
  box-shadow: none !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  .btn-danger,
  .btn-delete,
  .mobile-auth-buttons .logout-btn
) {
  --public-button-local-depth: var(--public-button-danger-depth);
}

/* The homepage CTA keeps depth only below the face. Lateral colour would
   recreate the glossy rail the matte public-button contract removes. */
html:root body.tw-homepage .btn.btn-oldprimary {
  --public-button-local-depth: #1849BB;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: #1849BB !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
):not(:disabled):not(.disabled):is(:hover, :focus-visible) {
  border-bottom-width: 4px !important;
  border-bottom-color: var(--public-button-local-depth) !important;
  box-shadow: var(--public-button-shadow-hover) !important;
  filter: brightness(1.035) saturate(1.025) !important;
  transform: none !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  .btn-secondary,
  .btn-cancel,
  .btn-manage,
  .btn-close,
  .btn-google-login,
  .social-google-btn,
  .mobile-login-btn,
  .navbar .btn-login,
  .mobile-auth-buttons .btn-login,
  .cct-btn-ghost,
  .cct-btn-secondary
):not(:disabled):not(.disabled):is(:hover, :focus-visible) {
  box-shadow: none !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
):not(:disabled):not(.disabled):active {
  appearance: none !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-top: 3px solid transparent !important;
  border-right-color: transparent !important;
  border-bottom-width: 1px !important;
  border-bottom-color: var(--public-button-local-depth) !important;
  border-left-color: transparent !important;
  box-shadow: var(--public-button-shadow-active) !important;
  filter: brightness(0.985) saturate(1.02) !important;
  outline: 0 !important;
  transform: none !important;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    filter 160ms ease,
    transform 120ms ease !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
):focus-visible {
  outline: 3px solid rgba(47, 107, 255, 0.2) !important;
  outline-offset: 2px !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
):is(:disabled, .disabled) {
  --public-button-local-depth: var(--public-button-neutral-depth);
  border-top-width: 0 !important;
  border-bottom-width: 4px !important;
  border-bottom-color: var(--public-button-local-depth) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Homepage hero secondary CTA: its page-specific hover rule previously
   recoloured only the lateral borders while the tactile depth retained the
   shared neutral tone. Keep a single surface/border/depth construction so the
   button remains one seamless object during press. */
html:root body.tw-homepage .hero .btn.btn-secondary {
  --home-secondary-surface: #ffffff;
  --home-secondary-border: #d6dfec;
  --home-secondary-depth: var(--public-button-neutral-depth);
  --public-button-local-depth: var(--home-secondary-depth);
  background: var(--home-secondary-surface) !important;
  border-top: 0 solid transparent !important;
  border-right: 1px solid var(--home-secondary-border) !important;
  border-bottom: 4px solid var(--home-secondary-depth) !important;
  border-left: 1px solid var(--home-secondary-border) !important;
  box-shadow: none !important;
}

html:root body.tw-homepage .hero .btn.btn-secondary:is(:hover, :focus-visible) {
  background: var(--home-secondary-surface) !important;
  border-right-color: var(--home-secondary-border) !important;
  border-bottom-color: var(--home-secondary-depth) !important;
  border-left-color: var(--home-secondary-border) !important;
  box-shadow: none !important;
  filter: brightness(1.012) saturate(1.01) !important;
}

html:root body.tw-homepage .hero .btn.btn-secondary:active {
  background: var(--home-secondary-surface) !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-top: 3px solid var(--home-secondary-surface) !important;
  border-right-color: transparent !important;
  border-bottom-width: 1px !important;
  border-bottom-color: var(--home-secondary-depth) !important;
  border-left-color: transparent !important;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12) !important;
  filter: brightness(0.99) saturate(1.01) !important;
  transform: none !important;
}

/* Mobile presses begin without a hover phase. Remove the resting inset shine
   immediately so it cannot linger across the newly contracted top corners. */
@media (max-width: 1372px), (pointer: coarse) {
  html:root body :is(
    .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
    a.btn,
    button.btn,
    .btn-login,
    .btn-register,
    .btn-enter,
    .btn-oldprimary,
    .mobile-login-btn,
    .mobile-register-btn,
    .mobile-auth-buttons .logout-btn,
    .submit-btn,
    .contact-btn,
    .checkout-btn,
    .btn-checkout,
    .btn-confirm,
    .btn-google-login,
    .social-google-btn,
    .cct-btn
  ):not(:disabled):not(.disabled):active {
    box-shadow: none !important;
    transition:
      background-color 160ms ease,
      color 160ms ease,
      filter 160ms ease,
      transform 120ms ease !important;
  }
}

/* Public controls keep a matte face in every external-page layout. */
html:root body.external-page {
  --public-button-shadow: none;
  --public-button-shadow-hover: none;
  --site-control-rest-shadow: none;
  --site-control-hover-shadow: none;
}
html:root body.external-page:is(.tw-homepage, .tw-register) :is(
  button, a.btn, .btn.btn-secondary, .btn-login, .btn-register,
  .mobile-login-btn, .mobile-register-btn, .social-google-btn, .btn-google-login
):not([data-tactile="off"]):not(.btn-login, .mobile-login-btn, .btn-secondary, .btn-cancel, .btn-manage, .btn-close, .btn-google-login, .social-google-btn, .cct-btn-ghost, .cct-btn-secondary),
html:root body.external-page:is(.tw-homepage, .tw-register) :is(
  button, a.btn, .btn.btn-secondary, .btn-login, .btn-register,
  .mobile-login-btn, .mobile-register-btn, .social-google-btn, .btn-google-login
):not([data-tactile="off"]):not(.btn-login, .mobile-login-btn, .btn-secondary, .btn-cancel, .btn-manage, .btn-close, .btn-google-login, .social-google-btn, .cct-btn-ghost, .cct-btn-secondary):is(:hover, :focus-visible, :active, :disabled) {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}