.assessment-review {
  &.changes {
    .assessment-review__workspace {
      width: min(100%, 880px);
    }
    .assessment-review__header {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }
  }

  .assessment-review__changes {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .assessment-review__readiness,
    .assessment-review__confirm {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px 24px;
      border: 1px solid var(--color-border-warning);
      border-radius: var(--border-radius-lg);
      background: var(--color-bg-primary);

      &.ready {
        border-color: var(--color-border-success);
      }

      h2 {
        margin: 0 0 6px;
        font-size: 20px;
      }

      p {
        margin: 0;
      }
    }

    .assessment-review__readiness-header p {
      color: var(--color-text-tertiary);
    }

    .assessment-review__readiness-checks {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .assessment-review__readiness-check {
      display: flex;
      gap: 12px;
      color: var(--color-text-secondary);
      line-height: 1.5;

      > i {
        padding-top: 4px;
        color: var(--color-fg-warning-primary);
      }

      &.satisfied > i {
        color: var(--color-fg-success-primary);
      }

      > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
      }

      strong {
        color: var(--color-text-primary);
      }
    }

    .assessment-review__readiness-links {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
      }

      a {
        min-width: 0;
        color: var(--color-text-link-primary);
        font-weight: var(--weight-semi-bold);
        overflow-wrap: anywhere;
      }

      span {
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
      }
    }

    .assessment-review__confirm {
      border-color: var(--color-border-brand);
      color: var(--color-text-secondary);
      line-height: 1.5;

      h2 {
        color: var(--color-text-primary);
      }

      .assessment-review__confirm-fields {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .assessment-review__confirm-consent {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        color: var(--color-text-primary);
      }
    }

    .assessment-review__section-header {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: baseline;
      gap: 8px;
      margin: 16px 0;
      color: var(--color-text-secondary);
      h3 {
        margin: 0;
        font-size: var(--font-size-md);
      }
    }

    .assessment-review__findings {
      display: grid;
      gap: 16px;
    }

    .assessment-review__readiness-details {
      > summary {
        cursor: pointer;
        margin: 16px 0;
        font-weight: var(--weight-semi-bold);
      }
    }

    .assessment-review__changes-summary {
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: center;
      padding: 24px;
      border-radius: var(--border-radius-lg);
      background: var(--color-bg-tertiary);
      color: var(--color-text-secondary);
      line-height: 1.5;

      ul {
        padding: 0;
        list-style: none;
      }

      p,
      ul {
        margin: 0;
      }

      strong {
        color: var(--color-text-primary);
      }
    }

    .assessment-review__change {
      padding: 24px;
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-lg);
      background: var(--color-bg-primary);
      overflow-wrap: anywhere;

      .assessment-review__question-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
        h4 {
          flex-basis: 100%;
          margin: 0;
          font-size: var(--font-size-lg);
        }
      }

      .assessment-review__question-code {
        font-size: var(--font-size-sm);
        font-weight: var(--weight-semi-bold);
      }
    }

    .assessment-review__change-notice {
      margin: 12px 0 0;
      color: var(--color-text-secondary);
      font-size: var(--font-size-sm);
    }

    .assessment-review__change-values {
      display: grid;
      gap: 16px;
      margin-top: 16px;
    }

    .assessment-review__change-original {
      display: flex;
      flex-direction: column;
      gap: 12px;

      dl {
        margin: 0;
      }

      dt {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
        font-weight: var(--weight-semi-bold);

        &:not(:first-child) {
          margin-top: 12px;
        }
      }

      dd {
        margin: 4px 0 0;
        color: var(--color-text-secondary);
      }
    }

    .assessment-review__change-issues {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .assessment-review__change-arrow {
      display: none;
      align-items: center;
      color: var(--color-text-tertiary);
    }

    .assessment-review__change-proposals {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .assessment-review__change-proposal {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      min-width: 0;

      p {
        margin: 0;
      }
    }

    .assessment-review__change-label {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      color: var(--color-text-tertiary);
      font-size: var(--font-size-sm);
      font-weight: var(--weight-semi-bold);
    }

    .assessment-review__change-value {
      font-weight: var(--weight-medium);
      white-space: pre-wrap;
    }

    .assessment-review__change-contributors {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .assessment-review__change-contributor {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      color: var(--color-text-secondary);
      font-size: var(--font-size-sm);

      + .assessment-review__change-contributor {
        padding-top: 12px;
        border-top: 1px solid var(--color-border-tertiary);
      }
    }

    .assessment-review__change-details {
      width: 100%;
      color: var(--color-text-secondary);
      font-size: var(--font-size-sm);
      line-height: 1.5;

      summary {
        cursor: pointer;
        color: var(--color-text-brand-secondary);
        font-weight: var(--weight-semi-bold);
      }

      > p {
        margin-top: 8px;
      }
    }

    .assessment-review__change-evidence {
      margin-top: 8px;
      padding: 12px;
      border-radius: var(--border-radius-sm);
      background: var(--color-bg-primary);

      blockquote {
        margin: 6px 0 0;
        font-style: italic;
      }
    }
  }
}

@media (min-width: 700px) {
  .assessment-review {
    .assessment-review__changes {
      .assessment-review__change-values {
        grid-template-columns: minmax(0, 2fr) auto minmax(0, 3fr);
        gap: 16px;
      }

      .assessment-review__change-arrow {
        display: flex;
      }

      .assessment-review__change-proposals {
        padding-left: 16px;
        border-left: 1px dashed var(--color-border-secondary);
      }
    }
  }
}