.framework {
  article section {
    margin-bottom: 2rem;
  }

  .top {
    &::after {
      content: '';
      display: block;
      clear: both;
    }

    h1 {
      margin-bottom: 0;
    }

    img {
      width: 100%;
      max-width: 500px;
      margin: 0 auto 1rem auto;
    }

    ul {
      display: table;
      gap: 0.25rem;
      margin: 0 auto 1rem auto;

      li {
        display: inline-block;
        margin: 0.25rem;
      }

      a {
        display: block;
        background: var(--blue-500);
        color: var(--light-50);
        padding: 0.25rem 0.75rem;
        border-radius: 50vh;
        font-size: 0.675rem;
        letter-spacing: -0.025rem;
      }
    }
  }

  aside {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .signin {
    display: flex;
    gap: 0.5rem;

    img {
      width: 1rem;
    }
  }

  .history-name {
    margin-bottom: 1rem;

    span {
      font-size: 0.75rem;
      margin-left: 1rem;
      color: tomato;
    }

    input[type='text'] {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid var(--light-700);
      border-radius: 0.5rem;
    }
  }

  .histories {
    ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      font-size: 0.875rem;
    }

    a {
      text-decoration: underline;
    }

    p {
      padding: 0.25rem 0.5rem;
      border: 2px solid var(--blue-500);
      border-radius: 0.5rem;
    }
  }

  .projects {
    ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
    }

    li {
      display: flex;
      align-items: center;
      font-size: 0.875rem;

      p,
      a {
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }

      a {
        text-decoration: underline;
      }

      img {
        object-fit: cover;
        width: 2rem;
      }

      &:has(p) {
        padding: 0.25rem 0.5rem;
        border: 2px solid var(--blue-500);
        border-radius: 0.5rem;
      }
    }
  }

  .body {
    h3 {
      margin-top: 3rem;

      &:first-child {
        margin-top: 0;
      }
    }

    h4 {
      font-weight: bold;
      margin-block: 1rem 0.5rem;
    }

    p {
      line-height: 2;
      margin-bottom: 0.5rem;
    }

    ul {
      list-style: disc;
      padding-left: 1.5rem;
      line-height: 2;
      margin-bottom: 1rem;

      ul {
        list-style: circle;
        margin-bottom: 0.5rem;
      }
    }

    table {
      width: 100%;
      border: 2px solid var(--blue-400);
      margin-bottom: 1rem;
      border-radius: 0.5rem;

      tr {
        &:not(:last-of-type) {
          border-bottom: 2px solid var(--blue-400);
        }

        &:first-of-type th:not(:first-of-type) {
          border-left: 2px solid var(--blue-400);
        }
      }

      th,
      td {
        padding: 0.5rem;

        p {
          margin: 0;
        }
      }

      th {
        position: relative;
        z-index: 1;
        font-size: 0.75rem;
        text-align: center;
        width: 25%;

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          z-index: -1;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            to bottom,
            var(--blue-50) 0%,
            var(--blue-500) 100%
          );
          opacity: 0.3;
        }
      }

      td {
        background: rgb(255 255 255 / 0.6);
        border-left: 2px solid var(--blue-400);
        font-size: 0.875rem;

        strong {
          display: block;
          font-size: 1rem;
        }

        p:not(:has(strong)) {
          font-size: 0.875rem;
          font-style: italic;
          line-height: 1.6;
          margin-top: 0.5rem;
        }

        ul {
          margin: 0;
        }
      }
    }
  }

  aside form {
    ul {
      display: grid;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    label {
      font-size: 0.875rem;
      margin-bottom: 0.25rem;
    }

    textarea {
      width: 100%;
      padding: 0.5rem;
      min-height: 10rem;
      border-radius: 0.25rem;
      border: 1px solid var(--dark-950);
    }
  }

  .ai-analysis {
    margin-bottom: 2rem;

    dt {
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    dd {
      background: var(--light-200);
      padding: 1rem 0.5rem;
      max-height: 50vh;
      overflow-y: auto;
      white-space: pre-line;
      line-height: 1.6;
    }
  }

  .submit {
    select {
      margin-left: 1rem;
      padding: 0.25rem 0.5rem;
      border: 1px solid var(--blue-400);
      border-radius: 0.25rem;
    }

    > button {
      margin-top: 1rem;
    }

    a {
      width: fit-content;
      margin-top: 1rem;
      padding: 0.25rem 1rem;
      border: 1px solid var(--blue-400);
      border-radius: 0.25rem;
    }
  }

  .update {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;

    .button {
      margin-left: 0;
    }
  }
}

@media (min-width: 744px) {
  .framework {
    .top {
      img {
        width: calc(100% / 3);
        float: left;
        margin-right: 1rem;
      }

      h2 {
        width: calc((200% / 3) - 1rem);
        margin-left: auto;
      }
    }

    aside form {
      ul {
        gap: 0;
      }

      li {
        position: relative;
        display: flex;
        flex-direction: column;

        textarea {
          flex: 1;
          padding-top: 1.5rem;
        }

        label {
          margin: 0;
          position: absolute;
          top: 0.25rem;
          left: 0.5rem;
          pointer-events: none;
          opacity: 0.6;
          font-size: 0.75rem;
          letter-spacing: -0.05rem;
        }
      }
    }

    .ai-analysis {
      dd {
        padding: 1rem;
      }
    }

    .update {
      flex-direction: row;
      justify-content: center;
      align-items: center;

      .button {
        margin: 0;
      }
    }
  }
}

@media (min-width: 1024px) {
  .framework {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: flex-start;
    gap: 2rem;

    article {
      position: sticky;
      top: 2rem;
      max-height: calc(100vh - 4rem);
      overflow: hidden auto;
      padding-inline: 0.5rem 1rem;
    }

    .top {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 10rem;
        background: linear-gradient(to top, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0));
        border-radius: 0.5rem;
      }

      img {
        float: none;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
        object-fit: cover;
        height: 10rem;
        border-radius: 0.5rem;
      }

      h1 {
        margin: 0;
        position: absolute;
        z-index: 1;
        left: 1rem;
        top: 7.5rem;
        text-shadow: var(--text-shadow-dark);
        color: var(--light-50);
        -webkit-text-fill-color: initial;
      }

      ul {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        margin: 0;
      }

      h2 {
        width: 100%;
        margin-left: 0;
      }

      p {
        line-height: 2;

        &:not(:last-of-type) {
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}

@media (min-width: 1280px) {
  .framework {
    grid-template-columns: repeat(12, minmax(0, 1fr));

    article {
      grid-column: 1 / 6;
    }

    aside {
      grid-column: 6 / 13;
    }

    aside form li label {
      letter-spacing: normal;
    }
  }
}