.companies {
  padding: 0 0 var(--space-s) 0;
  align-items: stretch;

  >a.company {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    background: var(--color-neutral-10);
    border: 1px solid var(--color-color-1);
    border-radius: 0.3em;
    overflow: hidden;
    text-overflow: ellipsis;
    /* display: -webkit-box; */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    &:hover {
      text-decoration: none;
      background: var(--color-neutral-9);
    }

    >span:nth-of-type(1) {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      max-height: calc(1.2em * 5);
      line-height: 1.2em;

      &.description {
        color: var(--color-neutral-5);
      }

      &.id {
        color: var(--color-neutral-5);
      }
    }
  }
}

.companies .n-breadcrumb:has(#add-company:checked) ~ article.company-edit {
  display: grid;
}

.companies .n-breadcrumb:not(:has(#add-company:checked)) ~ article.company-edit {
  display: none;
}

.flow > *+* {
  margin-block-start: var(--flow-space, 1em) !important;
}

.source-edit,
.company-edit {
  padding: 0 0 var(--space-s) 0;

  >form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    padding: var(--space-l) 0;
    background: var(--color-neutral-9);
    padding: var(--space-s);
    border: 1px solid var(--color-neutral-7);
    border-radius: 0.3em;

    >div.hol-wrapping-row {
      >div.hol-column {
        justify-items: start;

        >input[type="text"] {
          width: 100%;
        }
      }
    }

    >textarea {
      width: 100%;
    }
  }
}

.company-preview {
  padding: 0 0 var(--space-s) 0;

  >section {
    padding: var(--space-l) 0;
    background: var(--color-neutral-9);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--color-neutral-7);
    border-radius: 0.3em;

    >.actions {
      display: flex;
      justify-content: space-between;
    }
  }
}

.company-graph {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  >details {
    border: 1px solid var(--color-neutral-7);
    border-radius: 0.3rem;

    &[open] {
      background-color: var(--color-neutral-9);
      border: 1px solid var(--color-neutral-6);
    }

    &:hover {
      background-color: var(--color-neutral-9);
      border: 1px solid var(--color-neutral-6);
    }

    >summary {
      cursor: pointer;
      padding: var(--space-xs) var(--space-s);
    }

    > div {
      padding: 0 var(--space-s) var(--space-s) var(--space-s);

      >ul {
        display: flex;
        flex-direction: column;
        margin: 0;
        list-style: none;

        >li {
          display: flex;
          justify-content: space-between;
          align-items: center;

          >div {
            display: flex;
            gap: var(--space-xs);
            align-items: center;

            >.delete {
              display: none;
            }
          }

          &:hover {
            background-color: var(--color-neutral-8);

            >div {
              >.delete {
                display: initial;
              }
            }
          }
        }
      }

      >form.add-relationship {
        display: flex;
        gap: var(--space-xs);
        align-items: center;

        >input[type="number"] {
          width: 13ch;
        }
      }
    }
  }
}