.act {

  .act-header {
    display: flex;
    /* justify-content: fill-space-between ; */
    margin-block-end: var(--block-space);
    gap: var(--block-space);
    align-items: center;

    .select, .actions {
      flex: 0 0 auto; /* do not grow, do not shrink */
    }

    .select {
      --icon-size: 1.7em;
      display: flex;
      align-items: center;
    }

    .act-name {
      display: block;
      flex: 1 1 auto; /* grow to fill remaining space */
    }
  }

  .act-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--block-space);
    grid-template-areas:
      "email note"
      "rider note"
      "shows shows";
  }

  .act-riders {
    grid-area: rider;
  }
  .act-email {
    grid-area: email;
  }

  .act-note {
    grid-area: note;
  }

  .act-shows {
    grid-area: shows;
  }

  .act-show {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--block-space);

    background-color: var(--color-bg);
    padding: var(--block-space) calc(var(--block-space) * 2);
    border-radius: var(--global-radius);

    &:not(:last-of-type) {
      margin-block-end: var(--block-space);
    }

    grid-template-areas:
      "times material"
      "times actions"
    ;

      .times {
        grid-area: times;
      }
      .location {
        grid-area: location;
      }
      .material {
        grid-area: material;
      }

      .actions {
        grid-area: actions;
        display: flex;
        gap: calc(var(--block-space) * 0.5);
        align-items: center;
        justify-content: flex-end;
      }
  }
}

.is-collapsed .act-header {
  margin-block-end: 0;
}