Omphaloskepsis-2/assets/css/pages/_single-organisation.scss

.organisation {
  &__description {
    margin-block-end: 2em;

    details {
      margin-inline-start: 1em;
      padding-inline-start: 1em;
      border-inline-start: 2px solid $dark;

      summary {
        font-style: italic;
      }
    }
  }

  &__timeline {
    margin-block-end: 1em;

    & #timeline {
      clear: both;

      & > div > div {
        block-size: unset !important;

        & > div {
          position: unset !important;
          inline-size: unset !important;
          block-size: unset !important;

          & > div:first-of-type {
            overflow: unset !important;
            position: unset !important;
          }
        }
      }
    }
  }

  &__related {
    & .related-section {
      text-align: center;

      &--list {
        text-align: start;
        inline-size: 50%;
        display: inline-block;
        vertical-align: top;
        padding-block: 0;
        padding-inline: 2em;
      }

      & .related-items {
        margin-block: 2em;

        &--tiles {
          & .index {
            display: grid;
            grid-gap: 1em;
            grid-template-columns: repeat(4, 1fr);
          }
        }

        &--collapsible {
          margin-block-end: 1em;

          & summary {
            text-align: center;
            cursor: pointer;
            padding-block-end: 1em;

            &::marker {
              font-size: 2em;
              padding-inline-start: 2em;
              display: inline-block;
            }
          }
        }

        &--list {
          .related-item {
            &__expiry,
            &__grade {
              font-size: 0.8em;
              display: block;
              margin-inline-start: 0.5em;
            }
          }
        }

        &-title {
          border-block-end: none;
          display: inline-block;
        }

        & .related-item {
          &--expired {
            opacity: 0.4;
          }
        }
      }
    }
  }
}

.organisation-table {
  &__logo {
    max-inline-size: 5em;
    max-block-size: 5em;
  }
}

.timeline__legend > fieldset {
  inline-size: 45%;
  float: inline-start;
  text-align: center;
  border: none;

  & legend {
    display: block;
    inline-size: 100%;
  }
}

#hierarchy ul {
  list-style: none;
  padding-inline-start: 1em;

  & .hierarchy-item {
    &::before {
      content: "\21B3";
      margin-block: 0;
      margin-inline: 0.4em;
    }

    &--current {
      font-weight: bold;
    }

    &--child::before {
      content: "\2192";
    }
  }
}

.timeline__legend {
  & .legend__button {
    cursor: pointer;

    & span {
      margin-block: 0;
      margin-inline: 1em;
      display: inline-block;

      &.colour-square {
        inline-size: 1em;
        block-size: 1em;
        border-radius: 2.5px;
        border: 1px solid $dark;

        &--unpaid-current {
          background-color: #bbbbb0;
        }

        &--unpaid-past {
          background-color: #fffff0;
        }

        &--paid-current {
          background-color: #bcbc7e;
        }

        &--paid-past {
          background-color: #fcfca6;
        }
      }
    }

    &--disabled {
      text-decoration: line-through;
    }
  }
}

.site-content__body--chart {
  & #timeline,
  & #map {
    inline-size: 100%;
    max-inline-size: 100%;
    grid-area: section-chart;
  }
}

.site-content__body--list {
  & .site-content__sections-list {
    grid-area: sections-list;
    display: block;
    list-style: none;
    margin: auto;
    padding-inline-start: 0;

    & li * {
      display: inline-block;
    }
  }
}