#journal {
  padding: 1em 0;

  header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.5em;

    a {
      font-size: x-small;
    }
  }

  .disclaimer {
    font-size: x-small;
    margin: 0.5em 0;
  }

  &>form {
    display: grid;
    gap: 0.25em;
    grid-template-columns: 6em auto;
    width: 100%;

    input {
      height: 1.4lh;
    }

    textarea {
      grid-row: span 2;
    }
  }

  .entries {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin: 0.25em 0;

    .entry .view,
    .entry .edit {
      display: grid;
      grid-template-columns: fit-content(6em) auto;
      gap: 0.25em;
      align-items: stretch;
    }

    .date {
      font-weight: bold;

      &:after {
        content: ": ";
        font-weight: normal;
      }
    }

    .entry .hide {
      display: none;
      border: 2px solid red;
    }

    input {
      min-width: 5em;
    }

    .controls {
      display: grid;
      grid-template-columns: auto min-content;
      gap: 0.1em;

      textarea {
        grid-row: span 3;
      }
    }
  }
}