.assessment-config-presentation-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);

  @media (max-width: 786px) {
    gap: var(--spacing-md);
  }

  .vertical-group,
  .question-container,
  .question {
    &.skipped {
      display: none;
    }
  }

  .vertical-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-secondary);
    padding: var(--spacing-xl);

    .vertical-group-header {
      color: var(--color-text-secondary);
      font-size: var(--font-size-md);
      line-height: var(--line-height-text-md);
      font-weight: var(--weight-bold);

      &:not(:has(> * > *)) {
        display: none;
      }
    }

    .vertical-group-description,
    .vertical-group-disclaimer {
      font-size: var(--font-size-sm);
      line-height: var(--line-height-text-sm);
      font-weight: var(--weight-light);
    }

    .vertical-group-content {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }

    &.level-2 {
      background-color: var(--color-bg-secondary);
    }

    @media (max-width: 786px) {
      gap: var(--spacing-md);
      padding: var(--spacing-md);
    }
  }

  .question {
    display: flex;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-secondary);

    @media (max-width: 786px) {
      flex-direction: column;
    }

    &.requires-confirmation {
      background: var(--color-bg-progress-primary);
      border-left: 3px solid var(--color-border-progress);
    }

    &.missing-answer {
      background: var(--color-bg-info-primary);
      border: 1px solid var(--color-border-info);
    }

    .pulse-container {
      min-height: 32px;
      background: var(--color-skeleton-from);
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-md);
      animation: pulse-question-card 0.8s ease-in-out infinite;
    }

    .question-left-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--color-border-secondary);
      padding: var(--spacing-md);
      gap: 4px;

      .question-title {
        color: var(--color-text-primary);
        font-size: var(--font-size-sm);
        line-height: var(--line-height-text-md);
        font-weight: var(--weight-medium);
      }

      .question-code,
      .question-description,
      .question-disclaimer {
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        line-height: var(--line-height-text-sm);
        font-weight: var(--weight-light);
      }

      @media (max-width: 786px) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border-secondary);
      }
    }

    .question-right-container {
      flex: 2;
      padding: var(--spacing-md);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--spacing-xl);

      .skim-container {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);

        .skim-answer-container {
          color: var(--color-text-primary);
          font-size: var(--font-size-sm);
          line-height: var(--line-height-text-xs);
          font-weight: var(--weight-light);
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
      }

      .full-view-container {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);

        .full-view-question-form {
          max-height: 360px;
          overflow-y: auto;
        }

        .full-view-original-response {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: var(--spacing-xs);
          color: var(--color-text-quaternary);
          font-size: var(--font-size-xs);
          line-height: var(--line-height-text-xs);
          font-weight: var(--weight-regular);
          font-style: italic;

          .full-view-original-response-prefix {
            color: var(--color-text-tertiary);
          }

          .full-view-original-response-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--spacing-xs);
          }
        }

        .full-view-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;

          &:not(:has(> * > *)), /* Hide footer when its children (e.g. .full-view-footer-actions) have no children at all */
          &:not(:has(> * > :not(.hidden))) /* Hide footer when all grandchildren (action buttons) have the .hidden class */
          {
            display: none;
          }

          .full-view-footer-actions {
            display: flex;
            gap: var(--spacing-lg);
          }
        }
      }

      @media (max-width: 786px) {
        gap: var(--spacing-md);

        .skim-container {
          align-items: flex-start;
          gap: var(--spacing-sm);

          .skim-answer-container {
            -webkit-line-clamp: 2;
          }
        }

        .full-view-container {
          gap: var(--spacing-md);
        }
      }
    }

    .question-actions {
      padding: var(--spacing-md);

      @media (max-width: 786px) {
        padding-top: 0;
        display: flex;
        justify-content: flex-end;
      }

      i {
        color: var(--color-fg-quaternary);
        font-size: var(--font-size-md);

        &:hover {
          color: var(--color-fg-secondary);
        }
      }
    }

    .suggested-link {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--spacing-xs);
      width: fit-content;
      flex-wrap: wrap;

      .origin-label {
        color: var(--color-text-tertiary);
        font-size: var(--font-size-xs);
        line-height: var(--line-height-text-xs);
        font-weight: var(--weight-regular);
        font-style: italic;
      }

      .icon {
        color: var(--color-fg-secondary);
        font-size: var(--font-size-xs);
      }

      .info-icon {
        color: var(--color-text-brand-tertiary);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
      }

      .origin-wrapper {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
      }
    }

    .version-origin {
      font-size: var(--font-size-xs);
      line-height: var(--line-height-text-xs);
      font-weight: var(--weight-regular);
      color: var(--color-text-tertiary);
      font-style: italic;

      .version-origin-important {
        font-weight: var(--weight-semi-bold);
      }
    }

    .previous-answers {
      display: flex;
      width: fit-content;
      align-items: center;
      color: var(--color-text-link-primary);
      font-size: var(--font-size-xs);
      line-height: var(--line-height-text-xs);
      gap: var(--spacing-xs);

      &:hover {
        color: var(--color-text-link-primary_hover);
      }
    }

    .confirm-container {
      background-color: var(--color-bg-primary);
      margin-left: auto;
    }

    .choice-container {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-lg);

      .choice-group-title {
        color: var(--color-text-secondary);
        font-size: var(--font-size-xs);
        line-height: var(--line-height-text-xs);
        font-weight: var(--weight-medium);
      }

      .choice-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-lg);

        @media (max-width: 786px) {
          flex-direction: column;
          gap: var(--spacing-sm);
        }

        .choice-item {
          display: flex;
          flex-direction: row;
          gap: var(--spacing-md);
          padding: var(--spacing-md);
          border: 1px solid var(--color-border-secondary);
          border-radius: var(--border-radius-md);
          align-items: center;
          background-color: var(--color-bg-primary);

          &:has(input[type="checkbox"]:checked), &:has(input[type="radio"]:checked) {
            border-color: var(--color-border-selected);
            background-color: var(--color-bg-brand-secondary);
          }

          .choice-item-text {
            color: var(--color-text-secondary);
            font-size: var(--font-size-sm);
            line-height: var(--line-height-text-sm);
            font-weight: var(--weight-light);

            input[type="checkbox"]:checked ~ &,
            input[type="radio"]:checked ~ & {
              color: var(--color-text-primary);
              font-weight: var(--weight-regular);
            }
          }

          .placeholder-radio {
            width: 16px;
            height: 16px;
            border: 1px solid var(--color-border-primary);
            border-radius: 50%;
            box-sizing: border-box;
            flex: 0 0 16px;
          }

          input[type="radio"]:checked + .placeholder-radio {
            border: 5px solid var(--color-border-brand);
          }

          input[type="radio"] {
            display: none;
          }

          input[type="checkbox"] {
            margin-right: var(--spacing-md);
            width: 16px;
            height: 16px;
            border: 1px solid var(--color-border-primary);
            border-radius: var(--border-radius-xs);
            cursor: pointer !important;
            box-sizing: border-box;
            flex: 0 0 16px;
          }

          input[type="checkbox"]:checked {
            accent-color: var(--color-bg-brand-solid);
          }

          .bold-icon {
            font-size: var(--font-size-md);
            color: var(--color-fg-success-primary);
          }

          @media (max-width: 786px) {
            width: 100%;
          }
        }

        .choice-item-disabled {
          pointer-events: none;
          opacity: 0.8;
        }
      }
    }

    .input-with-unknown-wrapper {
      user-select: none;

      .input-value-unknown {
        display: flex;
        align-items: center;
        margin-top: var(--spacing-xl);

        label {
          cursor: pointer !important;
          font-size: var(--font-size-sm);
          line-height: var(--line-height-text-sm);
          font-weight: var(--weight-light);
          color: var(--color-text-secondary);
        }

        input[type="checkbox"] {
          margin-right: var(--spacing-md);
          width: 16px;
          height: 16px;
          border: 1px solid var(--color-border-primary);
          border-radius: var(--border-radius-xs);
          cursor: pointer !important;
        }

        input[type="checkbox"]:checked {
          accent-color: var(--color-bg-brand-solid);
        }
      }
    }
  }
}

@keyframes pulse-question-card {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}