.assessment-review {
  width: 100%;
  min-height: 100%;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);

  .assessment-review__workspace {
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 4px 0 28px;
  }

  .assessment-review__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;

    h1 {
      margin: 4px 0 8px;
      font-size: 30px;
      line-height: 1.2;
    }
  }

  .assessment-review__eyebrow,
  .assessment-review__status,
  .assessment-review__finding-kind,
  .assessment-review__rationale-label {
    margin: 0;
    color: var(--color-text-brand-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semi-bold);
    letter-spacing: 0.02em;
  }

  .assessment-review__introduction {
    max-width: 640px;
    margin: 0;
    color: var(--color-text-tertiary);
  }

  .assessment-review__state-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-primary);
  }

  .assessment-review__state-card--blocked,
  .assessment-review__state-card--failed {
    border-color: var(--color-border-error_subtle);
  }

  .assessment-review__state-card--processing {
    border-color: var(--color-border-info_subtle);
  }

  .assessment-review__state-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
    background: var(--color-bg-brand-primary);
    color: var(--color-fg-brand-primary);
    font-size: 22px;
  }

  .assessment-review__state-card--blocked .assessment-review__state-icon,
  .assessment-review__state-card--failed .assessment-review__state-icon {
    background: var(--color-bg-error-primary);
    color: var(--color-fg-error-primary);
  }

  .assessment-review__state-card--processing .assessment-review__state-icon {
    background: var(--color-bg-info-primary);
    color: var(--color-fg-info-primary);
  }

  .assessment-review__state-content {
    max-width: 620px;

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

    > p:not(.assessment-review__status) {
      margin: 0;
      color: var(--color-text-secondary);
      line-height: 1.55;
    }

    form,
    .assessment-review__state-action {
      margin-top: 20px;
    }
  }

  .assessment-review__blockers {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--color-text-secondary);
  }

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

  .assessment-review__report-header,
  .assessment-review__section {
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-primary);
  }

  .assessment-review__report-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;

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

    p:last-child {
      margin: 0;
      color: var(--color-text-tertiary);
    }

    form {
      margin: 0;
    }
  }

  .assessment-review__section {
    overflow: hidden;
  }

  .assessment-review__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-bg-tertiary);

    h3 {
      margin: 0;
      font-size: 18px;
    }

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

  .assessment-review__findings {
    display: flex;
    flex-direction: column;
  }

  .assessment-review__finding {
    padding: 20px;

    + .assessment-review__finding {
      border-top: 1px solid var(--color-border-secondary);
    }
  }

  .assessment-review__finding-header {
    margin-bottom: 16px;
  }

  .assessment-review__finding-severity {
    margin: 4px 0 0;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
  }

  .assessment-review__question {
    padding: 16px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-secondary);

    + .assessment-review__question {
      margin-top: 12px;
    }
  }

  .assessment-review__question-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    h4 {
      margin: 0;
      font-size: 16px;
      line-height: 1.45;
    }
  }

  .assessment-review__question-code {
    padding: 3px 8px;
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-brand-primary);
    color: var(--color-text-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semi-bold);
  }

  .assessment-review__question-description {
    margin: 8px 0 0;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }

  .assessment-review__current-value {
    display: grid;
    grid-template-columns: minmax(100px, max-content) 1fr;
    gap: 12px;
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-secondary);

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

    dd {
      margin: 0;
      font-weight: var(--weight-medium);
    }
  }

  .assessment-review__rationale {
    margin-top: 16px;
    padding: 14px 16px;
    border-left: 3px solid var(--color-border-brand);
    background: var(--color-bg-brand-primary);

    > p:last-child {
      margin: 4px 0 0;
      color: var(--color-text-secondary);
      line-height: 1.5;
    }
  }
}

@media (min-width: 700px) {
  .assessment-review {
    .assessment-review__workspace {
      padding: 12px 4px 40px;
    }

    .assessment-review__header,
    .assessment-review__report-header {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .assessment-review__state-card {
      flex-direction: row;
      padding: 40px;
    }

    .assessment-review__question-heading {
      flex-direction: row;
      align-items: center;
    }
  }
}