.accountability {
  &__status {
    @apply flex flex-col gap-3 w-full;

    &-container {
      @apply w-full last:[&>*]:flex last:[&>*]:gap-1;
    }

    &-title {
      @apply font-semibold text-secondary text-lg [&+*]:mt-auto;
    }

    &-progress {
      @apply w-full h-4 rounded overflow-hidden bg-white [&>*]:bg-success [&>*]:h-full;
    }

    &-value {
      @apply flex justify-between items-baseline gap-1 text-gray-2;

      > :first-child {
        @apply text-4xl font-bold;
      }

      > :last-child:not(:only-child) {
        @apply text-sm truncate;
      }
    }

    &__home {
      @apply gap-4 p-6 bg-white drop-shadow-[0_4px_6px_rgba(211,211,211,0.25)];
    }

    &__home &-title {
      @apply text-xl text-gray-2;
    }

    &__home &-progress {
      @apply bg-background;
    }

    &__home &-value > :first-child {
      @apply text-[48px];
    }

    &__background {
      @apply bg-background p-4;
    }

    &__border {
      @apply border-2 border-background rounded p-4;
    }

    &__border &-progress {
      @apply invisible;
    }

    &__border &-title {
      @apply text-md text-secondary;
    }

    &__parent {
      @apply p-4 gap-1 bg-white drop-shadow-[0_4px_6px_rgba(211,211,211,0.25)];
    }

    &__parent &-progress {
      @apply hidden;
    }

    &__parent &-value > :first-child {
      @apply text-xl;
    }

    &__child {
      @apply mt-4 p-4 bg-white drop-shadow-[0_4px_6px_rgba(211,211,211,0.25)];
    }

    &__child &-title {
      @apply text-md;
    }

    &__child &-progress {
      @apply bg-background;
    }

    &__child &-value > :first-child {
      @apply text-3xl;
    }

    &__project &-title {
      @apply text-gray-2 text-md font-normal;
    }
  }

  &__grid {
    @apply grid md:grid-cols-3 items-start gap-x-10 gap-y-8 md:gap-y-16;

    & > :nth-child(even) {
      @apply grid md:col-span-2;
    }

    /* display the titles only for the first two rows in desktop */
    & > :nth-child(1) &-title,
    & > :nth-child(2) &-title {
      @apply md:block;
    }

    &-title {
      @apply block md:hidden mb-8 text-gray-2 uppercase font-semibold;
    }

    .flash {
      @apply m-0;
    }
  }

  &__subgrid {
    @apply grid md:grid-cols-2 gap-6;
  }

  &__progress {
    @apply ml-auto rounded px-3 md:px-6 py-4 bg-background font-bold text-gray-2 text-xl w-full md:w-auto min-w-[120px] grid place-items-center;
  }

  &__project {
    &-aside {
      @apply bg-background p-4 rounded divide-y divide-gray-3 [&>*]:py-4 first:[&>*]:pt-0 last:[&>*]:pb-0;

      &-item {
        @apply text-gray-2 space-y-1.5;

        > :first-child {
          @apply text-sm flex items-center gap-1;
        }

        > :last-child {
          @apply text-md font-semibold;
        }
      }
    }

    &-timeline {
      @apply flex flex-col gap-6;

      &-entry {
        @apply flex items-start gap-2 relative before:absolute before:w-px before:-z-10 before:left-3 before:bg-gray-3 before:h-[calc(100%+1.5rem)] last:before:h-6 before:-top-3 first:before:top-3;

        &-number {
          @apply rounded-full w-6 h-6 bg-background grid place-items-center text-gray-2 text-lg font-semibold;
        }

        &-attributes {
          @apply text-gray-2 text-sm;

          > :first-child {
            @apply text-lg font-semibold;
          }
        }
      }
    }

    &-list {
      @apply space-y-6;
    }
  }

  &__filters {
    @apply w-full space-y-10;
  }
}