.step-notes {
  // By default, notes aren't shown. We only show them if they are in focused or
  // if they are non-empty. But we cannot set display:none, because the user
  // may call notesInputRef.current.focus() before they become visible.
  position: relative; // so we can position `.step .step-notes::before`

  .editable-notes {
    position: relative;
    overflow: hidden;

    textarea {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .invisible-size-setter {
      visibility: hidden; // but take up space!
      padding-bottom: 1rem; // not margin because first note overrides background to hide line of life
    }

    &:focus-within .invisible-size-setter:empty::before {
      display: inline;
      content: ' '; // take up space!
    }

    &:not(:focus-within) .invisible-size-setter:empty {
      padding-bottom: 0; // hide empty notes
    }
  }

  & > * {
    width: $module-width;
    margin-left: 4rem; // size of h3 numbers at the left-hand side
  }

  textarea,
  .editable-notes-read-only,
  .invisible-size-setter {
    @include content-1;
    display: block;
    border: 0;
    padding: 0;
    outline: none;
    resize: none;
    color: $brand-text--dark;
    background-color: transparent;
    word-break: break-word;
    overflow: hidden;
  }
}
