.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;

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

  &.succeeded .assessment-review__workspace {
    width: 100%;
  }

  .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__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;
    }

    @media (min-width: 700px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .assessment-review__introduction {
    max-width: 640px;
    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-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-content {
      max-width: 620px;

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

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

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

    &.assessment-review__state-card--failed {
      border-color: var(--color-border-error_subtle);

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

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

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

    @media (min-width: 700px) {
      flex-direction: row;
      padding: 40px;
    }
  }

  .assessment-review__state-card:is(
      .assessment-review__state-card--processing,
      .assessment-review__state-card--failed
    ) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 56px;

    .assessment-review__state-content > form,
    .assessment-review__state-action {
      display: flex;
      justify-content: center;
    }
  }

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

    .assessment-review__report-body {
      overflow-anchor: none;
      display: grid;
      gap: 28px;

      @media (min-width: 1000px) {
        grid-template-columns: 240px minmax(0, 1fr);
        align-items: start;
      }
    }

    .assessment-review__sidebar {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: 12px;

      .assessment-review__progress-region,
      .assessment-review__groups,
      .assessment-review__group-mode {
        grid-column: 1 / -1;
      }

      @media (min-width: 1000px) {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: sticky;
        top: 16px;
        max-height: calc(100dvh - 220px);
        overflow: auto;
      }
    }

    .assessment-review__groups {
      min-height: 0;
      width: 100%;
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-lg);
      background: var(--color-bg-primary);
      overflow: auto;
      max-height: 35dvh;

      @media (min-width: 1000px) {
        max-height: none;
      }

      h3 {
        margin: 0;
        padding: 18px;
        border-bottom: 1px solid var(--color-border-secondary);
        font-size: var(--font-size-sm);
      }
    }

    .assessment-review__group-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 18px;
      border-left: 3px solid transparent;
      color: var(--color-text-tertiary);

      &.selected {
        border-color: var(--color-border-brand);
        color: var(--color-text-primary);
        background: var(--color-bg-secondary);
        font-weight: var(--weight-semi-bold);
      }
    }

    .assessment-review__results {
      min-width: 0;
    }

    .assessment-review__results-toolbar {
      background: var(--color-bg-secondary);
      border-bottom: 1px solid var(--color-border-secondary);

      @media (min-width: 1000px) {
        position: sticky;
        top: 0;
        z-index: 1;
      }
    }

    .assessment-review__group-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 0 20px;
      text-align: center;

      h1 {
        margin: 8px 0;
        font-size: 24px;
      }
    }

    .assessment-review__group-navigation {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: var(--border-radius-full);
      color: var(--color-text-tertiary);

      &:hover {
        background: var(--color-bg-tertiary);
      }

      &.disabled {
        color: var(--color-fg-quaternary);
        background: transparent;
      }
    }

    .assessment-review__group-title {
      flex: 1;
      min-width: 0;
    }

    .assessment-review__group-position {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .assessment-review__position-dot {
      width: 8px;
      height: 8px;
      border-radius: var(--border-radius-full);
      background: var(--color-bg-quaternary);

      &.selected {
        background: var(--color-fg-secondary);
      }
    }

    .assessment-review__filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      padding: 12px 0 20px;

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

    .assessment-review__issue-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .assessment-review__issue-filter {
      padding: 5px 10px;
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-full);
      color: var(--color-text-tertiary);
      font-size: var(--font-size-sm);

      &.active {
        background: var(--color-bg-info-primary);
        color: var(--color-text-info-primary);
        border-color: var(--color-border-info_subtle);
      }

      &.active.document_conflict {
        background: var(--color-bg-warning-primary);
        color: var(--color-text-warning-primary);
        border-color: var(--color-border-warning_subtle);
      }

      &.active.validation_error {
        background: var(--color-bg-error-primary);
        color: var(--color-text-error-primary);
        border-color: var(--color-border-error_subtle);
      }
    }

    .assessment-review__findings {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 880px;
      margin: 0 auto;
      padding: 24px 0;
    }

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

      p {
        margin: 0 0 12px;
      }

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

      progress {
        appearance: none;
        width: 100%;
        height: 8px;
        border: 0;
        border-radius: var(--border-radius-full);
        overflow: hidden;
        background: var(--color-bg-quaternary);

        &::-webkit-progress-bar {
          background: var(--color-bg-quaternary);
        }

        &::-webkit-progress-value {
          background: var(--color-bg-brand-solid);
          border-radius: var(--border-radius-full);
        }

        &::-moz-progress-bar {
          background: var(--color-bg-brand-solid);
          border-radius: var(--border-radius-full);
        }
      }
    }
  }

  .assessment-review__report-header {
    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__report-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  .assessment-review__finding {
    padding: 24px;
    border: 1px solid var(--color-border-info_subtle);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-primary);
    overflow-wrap: anywhere;
    scroll-margin-top: calc(var(--review-toolbar-height, 0px) + 16px);

    &.document_conflict {
      border-color: var(--color-border-warning_subtle);

      .assessment-review__finding-kind {
        color: var(--color-text-warning-primary);
      }
    }

    &.validation_error {
      border-color: var(--color-border-error_subtle);

      .assessment-review__finding-kind {
        color: var(--color-text-error-primary);
      }
    }

    form {
      margin: 0;
    }

    .assessment-review__finding-header {
      margin-bottom: 20px;

      > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 12px;
      }
    }

    .assessment-review__reviewed-label {
      margin-left: auto;
      color: var(--color-text-success-primary);
      font-size: var(--font-size-sm);
    }

    .assessment-review__unsaved {
      margin: 0;
      color: var(--color-text-warning-primary);
      font-size: var(--font-size-sm);
    }

    .assessment-review__editor-controls {
      border: 0;
      padding: 0;
      margin: 0;
      min-width: 0;
    }

    .assessment-review__answer-input {
      border: 0;
      padding: 0;
      margin: 0;
      min-width: 0;
      display: grid;
      gap: 10px;

      > legend {
        margin-bottom: 8px;
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
      }
      .assessment-review__option {
        cursor: pointer;
        align-items: start;
        small { margin-top: 4px; }
        &:has(input:checked) {
          background: var(--color-bg-brand-primary);
          border-color: var(--color-border-brand);
        }
      }
    }

    .assessment-review__answer-options {
      display: grid;
      gap: 10px;
      max-height: min(32rem, 55dvh);
      overflow-y: auto;
      scrollbar-gutter: stable;
    }

    .assessment-review__option-markers {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 12px;
      color: var(--color-text-tertiary);
    }

    .assessment-review__suggestion-marker {
      color: var(--color-text-success-primary);
    }

    .assessment-review__autosave {
      color: var(--color-text-tertiary);
      font-size: var(--font-size-sm);
      p { margin: 12px 0 0; }
    }

    .assessment-review__option {
      display: flex;
      align-items: baseline;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-md);
      color: var(--color-text-secondary);

      small {
        font-size: var(--font-size-xs);
      }

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

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

    .assessment-review__subjects {
      display: grid;
      gap: 16px;

      @media (min-width: 1000px) {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      }
    }

    .assessment-review__question {
      min-width: 0;

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

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

      .assessment-review__question-code {
        flex-shrink: 0;
        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);
        white-space: nowrap;
      }

      .assessment-review__question-section {
        margin: 12px 0 0;
        color: var(--color-text-tertiary);
        font-size: var(--font-size-xs);
      }

      .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__answer-value {
      display: grid;
      grid-template-columns: 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);
        white-space: pre-wrap;
      }
    }

    &:not(.answer_relationship) {
      @media (min-width: 1000px) {
        .assessment-review__question {
          display: grid;
          grid-template-columns: minmax(180px, 1fr) minmax(0, 1.5fr);
          gap: 24px;
        }

        .assessment-review__answer-value {
          grid-template-columns: 1fr;
        }
      }
    }

    &.reviewed {
      border-color: var(--color-border-secondary);

      .assessment-review__question {
        display: block;
        summary {
          cursor: pointer;
          margin-top: 8px;
        }
      }

      .assessment-review__question-heading {
        flex-direction: row;
        align-items: baseline;
      }
      .assessment-review__answer-value {
        gap: 6px;
        padding-top: 0;
        border: 0;
      }
      .assessment-review__decision-summary,
      .assessment-review__decision-staged {
        margin: 0;
      }
      .assessment-review__decision-staged {
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
      }
      .assessment-review__finding-header {
        margin-bottom: 12px;
      }
      .assessment-review__rationale {
        padding: 0;
        background: none;
        margin-top: 12px;
      }
      .assessment-review__suggestion {
        margin-top: 12px;
        padding-top: 12px;
      }
      .assessment-review__decision {
        padding: 0;
        border: 0;
        margin-top: 12px;
      }
    }

    .assessment-review__rationale {
      > summary {
        cursor: pointer;
      }
      margin-top: 20px;
      padding: 16px;
      border-radius: var(--border-radius-md);
      background: var(--color-bg-secondary);

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

    .assessment-review__suggestion {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--color-border-secondary);

      summary {
        cursor: pointer;
        font-weight: var(--weight-medium);
      }

      .assessment-review__suggested-value {
        padding: 16px;
        border: 1px solid var(--color-border-success_subtle);
        border-radius: var(--border-radius-md);
        background: var(--color-bg-success-primary);
      }

      .assessment-review__evidence {
        margin-top: 16px;
        padding: 16px;
        border-radius: var(--border-radius-md);
        background: var(--color-bg-secondary);
      }

      .assessment-review__evidence-source {
        margin: 12px 0 0;
      }

      .assessment-review__evidence-excerpt {
        margin: 8px 0 0;
        font-style: italic;
        white-space: pre-wrap;
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
        line-height: 1.5;
      }
    }

    .assessment-review__actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;

      .assessment-review__actions-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
      }

      .assessment-review__note summary {
        margin-bottom: 8px;
        cursor: pointer;
      }
    }

    .assessment-review__decision {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 16px;
      padding: 16px;
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-md);
      background: var(--color-bg-primary);

      > p {
        margin: 0;
      }

      .assessment-review__decision-staged,
      .assessment-review__current-value {
        flex-basis: 100%;
      }

      .assessment-review__decision-rationale {
        flex-basis: 100%;
        white-space: pre-wrap;
      }
    }
  }

  .assessment-review__current-value {
    display: grid;
    grid-template-columns: minmax(0, 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);
    }

    &.staged {
      border-top-color: var(--color-border-brand);

      dd {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
    }
  }

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

  .assessment-review__completion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 64px 24px;
    text-align: center;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-primary);

    > i {
      color: var(--color-fg-success-primary);
      font-size: 32px;
    }
    h2,
    p {
      margin: 0;
    }
    p {
      color: var(--color-text-tertiary);
    }
  }

  .assessment-review__decision-staged {
    margin: 4px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 700px) {
  .assessment-review {
    .assessment-review__report-header {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
}