:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* Margin top */
.xfam-u-mt-xs {
  margin-top: var(--space-xs);
}

.xfam-u-mt-sm {
  margin-top: var(--space-sm);
}

.xfam-u-mt-md {
  margin-top: var(--space-md);
}

.xfam-u-mt-lg {
  margin-top: var(--space-lg);
}

.xfam-u-mt-xl {
  margin-top: var(--space-xl);
}

/* Margin bottom */
.xfam-u-mb-xs {
  margin-bottom: var(--space-xs);
}

.xfam-u-mb-sm {
  margin-bottom: var(--space-sm);
}

.xfam-u-mb-md {
  margin-bottom: var(--space-md);
}

.xfam-u-mb-lg {
  margin-bottom: var(--space-lg);
}

.xfam-u-mb-xl {
  margin-bottom: var(--space-xl);
}

/* Margin left / right */
.xfam-u-ml-sm {
  margin-left: var(--space-sm);
}

.xfam-u-mr-sm {
  margin-right: var(--space-sm);
}

/* Both axes */
.xfam-u-mx-md {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}

.xfam-u-my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* All sides */
.xfam-u-m-md {
  margin: var(--space-md);
}


/* ── Card ─────────────────────────────────────────────── */

.xfam-card {
  width: 100%;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: flex-start;
  height: max-content;
  border-radius: var(--card_radius);
  background: var(--color_bright);
  border: 1px solid var(--color_grey_3_on_bright_2_on_dark);
  overflow: hidden;
}

.xfam-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-md);
}

.xfam-card__fold+.xfam-card__inner {
  margin-top: 0;
}

.xfam-card__fold,
.xfam-card__section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.xfam-card__section {
  height: 45px;
}

.xfam-card__section> :nth-child(2) {
  border-left: 1px solid var(--color_grey_3_on_bright_2_on_dark);
}

.xfam-card__fold>*,
.xfam-card__section>* {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.xfam-card__fold>* {
  height: calc(var(--space-md) * 2.5);
}


.xfam-u-border-top {
  border-top: 1px solid var(--color_grey_3_on_bright_2_on_dark);
}


/* ── Fold toggle ──────────────────────────────────────── */

.xfam-card__fold-btn>i:before {
  --fa: '\e0a3';
  --fa--fa: '\e0a3\e0a3';
}

.is-folded .xfam-card__fold-btn>i:before {
  --fa: '\e0a6';
  --fa--fa: '\e0a6\e0a6';
}

.is-folded .xfam-card__inner--foldable {
  display: none;
}


/* ── Naked button ─────────────────────────────────────── */

.xfam-naked-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-weight: var(--thicker_font);
}

.xfam-naked-btn--copy {
  height: 25px;
  width: 25px;
}


/* ── Blob button — shared structure ───────────────────── */

.xfam-btn::before,
.xfam-btn::after {
  content: '';
  position: absolute;
  z-index: 0;
  transition: opacity 0.5s ease;
}

.xfam-btn::before {
  inset: 0;
  filter: blur(18px);
  border-radius: inherit;
  opacity: 1;
}

.xfam-btn::after {
  inset: -40%;
  filter: blur(20px);
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  animation: blob-drift 6s ease-in-out infinite alternate paused;
  opacity: 0;
}

.xfam-btn:hover::before {
  opacity: 0;
}

.xfam-btn:hover::after {
  animation-play-state: running;
  opacity: 1;
}

.xfam-btn * {
  position: relative;
  z-index: 1;
  font-size: var(--txt_S);
}

.xfam-btn i {
  margin-right: 4px;
}

.xfam-btn span {
  font-weight: var(--thicker_font);
}

.xfam-btn--danger:hover * {
  color: var(--color_bright_always);
}


/* ── Blob button — per-variant colors ────────────────── */

.xfam-btn--active-toggle[value="1"]::before {
  background: radial-gradient(ellipse at center,
      rgba(105, 193, 96, 0.45) 0%,
      rgba(150, 220, 130, 0.4) 50%,
      transparent 75%);
}

.xfam-btn--active-toggle[value="1"]::after {
  background: linear-gradient(294deg,
      rgba(105, 193, 96, 0.6) 0%,
      rgba(150, 220, 130, 0.85) 100%);
}

.xfam-btn--active-toggle[value="0"]::before {
  background: radial-gradient(ellipse at center,
      rgba(241, 223, 209, 0.45) 0%,
      rgba(246, 240, 234, 0.2) 50%,
      transparent 75%);
}

.xfam-btn--active-toggle[value="0"]::after {
  background: linear-gradient(315deg,
      rgba(241, 223, 209, 0.6) 0%,
      rgba(246, 240, 234, 0.85) 74%);
}

.xfam-btn--danger::before {
  background: radial-gradient(ellipse at center,
      rgba(255, 75, 43, 0.45) 0%,
      rgba(255, 65, 108, 0.2) 50%,
      transparent 75%);
}

.xfam-btn--danger::after {
  background: linear-gradient(to bottom,
      rgba(255, 75, 43, 0.6) 0%,
      rgba(255, 65, 108, 0.85) 100%);
}

.xfam-mint::before {
  background: radial-gradient(ellipse at center,
      rgba(186, 230, 219, 0.75) 0%,
      rgba(186, 230, 219, 0.2) 50%,
      transparent 75%);
}

.xfam-mint::after {
  background: linear-gradient(to bottom,
      rgba(186, 230, 219, 0.6) 0%,
      rgba(186, 230, 219, 0.85) 100%);
}


/* ── Blob drift animation ─────────────────────────────── */

@keyframes blob-drift {
  0% {
    transform: translate(-10%, -10%) scale(1);
    border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  }

  25% {
    transform: translate(8%, -5%) scale(1.05);
    border-radius: 55% 45% 40% 60% / 40% 55% 45% 60%;
  }

  50% {
    transform: translate(5%, 10%) scale(0.95);
    border-radius: 60% 40% 60% 40% / 60% 40% 55% 45%;
  }

  75% {
    transform: translate(-8%, 5%) scale(1.08);
    border-radius: 45% 55% 45% 55% / 55% 45% 60% 40%;
  }

  100% {
    transform: translate(-5%, -8%) scale(1);
    border-radius: 50% 50% 40% 60% / 45% 55% 50% 50%;
  }
}

.xfam-u-hover-blue:hover {
  color: var(--color_blue);
}

.xfam-u-font-normal {
  font-weight: var(--skinny_font);
}

.xfam-u-font-bold {
  font-weight: var(--thicker_font);
}

.xfam-u-font-bolder {
  font-weight: var(--thickest_font);
}

.xfam-u-hover-underline:hover {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color_mint_always);
}

.xfam-u-underline-dotted {
  text-decoration: underline;
  text-decoration-style: dotted;
}

@-moz-document url-prefix() {

  .xfam-u-underline-dotted {
    text-decoration-thickness: 2px;
  }
}

/* INFO POINT */

.xfam-info-point {
  display: grid;
  grid-template-columns: 45px 1fr;
  align-items: center;
  gap: var(--space-sm);
}

.xfam-info-point__icon {
  width: 30px;
  height: 30px;
  display: flex;
  border: 2px solid var(--color_st_in_progress);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
}

.xfam-info-point__icon * {
  --fa-secondary-opacity: 1.0;
  --fa-primary-color: var(--color_st_in_progress);
  --fa-secondary-color: transparent;
  font-size: var(--txt_XL);
}