@charset "utf-8";

.doc {
  margin-right: auto;
  margin-left: auto;

  caption {
    color: #f60;
    text-align: center;
  }

  tr {
    display: flex;
    flex-wrap: wrap;

    margin-top: 1em;

    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #f90;
    border-right-color: #f90;
    border-bottom-color: #f90;
    border-left-color: #f90;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;

    overflow: hidden;

    &:has(.doc-note:empty) {
      .doc-subject {
        border-bottom-style: none;
      }
    }

    &.group-start {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.group-item {
      margin-top: -1px;

      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;

      .doc-date {
        color: rgb(51 51 51 / 0.5);
        font-weight: 400;

        background-color: rgb(255 204 153 / 0.5);

        &::before {
          color: rgb(102 102 102 / 0.5);
        }
      }

      &.group-end {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }
    }
  }

  th,
  td {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f90;

    padding-top: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;

    &::before {
      display: block;

      color: #666;
      font-size: 0.75em;
      font-weight: 300;
      content: attr(data-label);
    }
  }

  th {
    font-weight: 500;

    background-color: #fc9;
  }

  .doc-date,
  .doc-org {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 20em;
  }

  .doc-subject,
  .doc-note {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
  }

  .doc-subject {
    >ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));

      margin-top: 0.5em;
      row-gap: 0.5em;
      column-gap: 0.5em;

      font-size: 1.4rem;
    }

    li {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;

      padding-top: 0.5em;
      padding-right: 0.5em;
      padding-bottom: 0.5em;
      padding-left: 0.5em;

      background-color: #ff6;

      li {
        background-color: #ffc;
      }
    }
  }

  .doc-note {
    border-bottom-style: none;

    &:empty {
      display: none;
    }
  }
}