.questions {
  @apply flex flex-col gap-3 px-2 py-5 mx-5;
  & > header {
    @apply grid gap-2;
    grid-template-columns: 1fr auto;
    div.new-question {
      @apply flex gap-4 items-baseline;
    }
  }
  pf-panel.filter-panel {
    .status-filter {
      @apply flex gap-2.5;
      label {
        @apply flex;
      }
    }
  }

  .question-area,
  .answer-area {
    @apply grid gap-x-3 gap-y-1;
    grid-template-areas:
    "icon header ."
    "icon text confidence"
    "icon summary .";
    grid-template-columns: auto 1fr auto;
    &> .icon {
      @apply text-primary;
      grid-area: icon;
    }
    h2 {
      @apply text-sm;
      grid-area: header;
    }
    p.question {
      @apply font-bold text-base;
      grid-area: text;
    }
    div.answer {
      grid-area: text;
    }
    div.summary {
      @apply flex flex-col text-text-muted text-sm;
      h3 {
        @apply text-text-secondary text-sm font-semibold;
      }
      div {
        @apply px-2.5;
      }
      grid-area: summary;
    }
    dl.confidence {
      grid-area: confidence;
    }
  }

  > div.question-container {
    @apply grid gap-3 overflow-scroll h-full;
    grid-template-areas: "list document data";
    grid-template-columns: 350px minmax(0, 1fr)  450px;
    grid-template-rows: min-content min-content 1fr;

    .list-area {
      @apply h-base-padded max-h-base-padded overflow-scroll;
      search {
        @apply py-0 flex;
        input {
          @apply flex-1 text-sm;
        }
      }
      div.document {
        @apply p-2.5 border-b border-b-border cursor-pointer gap-4;
        &:not(.hidden) {
          @apply grid;
        }
        grid-template-columns: auto 1fr auto;
        &[aria-selected="true"] {
          @apply bg-primary-light rounded-md border-primary-light-hover border;
          .info {
            @apply text-[#1d5e93];
          }
        }
        &:has(+ [aria-selected="true"]) {
          @apply border-0;
        }
        .icon.pdf {
          @apply w-9 h-9;
        }
        .title {
          @apply font-semibold;
        }
        .info {
          @apply flex gap-3 text-text-secondary text-xs;
        }
      }
      grid-area: list;
    }
    .document-area {
      grid-area: document;
      pf-tab-pages {
        @apply overflow-hidden flex flex-col h-base-padded max-h-base-padded;
        pf-tab-page {
          @apply overflow-hidden flex flex-col;
        }
      }
    }
    .data-area {
      @apply h-base-padded max-h-base-padded overflow-scroll flex flex-col;
      grid-area: data;
      header h3 {
        @apply flex-1;
      }
      .finding-list {
        @apply flex flex-col gap-3;
      }
      .finding {
        @apply grid gap-y-0;
        grid-template-areas:
          "counter confidence arrow"
          ". finding ."
          ". aside . "
          ". footer . ";
        grid-template-columns: auto 1fr auto;
        .counter {
          grid-area: counter;
        }
        .confidence {
          @apply flex gap-4 items-center text-text-secondary text-sm font-semibold;
          grid-area: confidence;
          .relevance {
            @apply flex-1 text-right font-normal;
          }
        }
        .arrow {
          grid-area: arrow;
        }
        div.finding-text {
          grid-area: finding;
          .finding-text-content {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: var(--read-more-line-clamp, 2);
            line-clamp: var(--read-more-line-clamp, 2);
          }
        }
        aside {
          @apply overflow-hidden;
          grid-area: aside;
          ul {
            @apply flex flex-col gap-2;
            li {
              @apply text-sm text-nowrap overflow-hidden text-ellipsis cursor-pointer;
            }
          }
        }
        footer {
          span {
            @apply text-2xs text-primary bg-primary-light p-2 cursor-pointer;
          }
          grid-area: footer;
        }
      }
    }
  }

  /* NEW */
  label {
    @apply block;
  }
  .question-scope-selector {
    @apply flex gap-2;
    input {
      @apply hidden;
    }
    label {
      @apply border-1 rounded-md p-2 border-border hover:bg-emerald-100 cursor-pointer font-normal bg-white;
      header {
        @apply font-medium;
      }
      span {
        @apply italic text-sm;
      }
    }
    input:checked + label {
      @apply bg-emerald-600 text-white;
    }
  }
  .question-document-selector {
    @apply hidden;
  }
  .question-scope-selector:has( > input[value="document"]:checked) + .question-document-selector {
    @apply block;
  }
  textarea {
    @apply w-full max-w-2xl min-h-56;
  }
}


.scope-cell {
  @apply flex flex-row gap-3;
  .info {
    @apply flex flex-col flex-1 gap-1;
    .name {
    }
    .description {
      @apply text-xs text-text-muted;
    }
  }
}