/*
    See the JupyterLab Developer Guide for useful CSS Patterns:

    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/

/* Research Library Panel Styles */
.jp-WWCExtension-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
}

.jp-WWCExtension-tabs {
  display: flex;
  border-bottom: 1px solid var(--jp-border-color1);
  margin-bottom: 8px;
}

.jp-WWCExtension-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-bottom-color 0.15s ease-in-out;
  font-weight: 500;
  min-width: fit-content;
}

.jp-WWCExtension-tab:hover {
  color: var(--jp-content-font-color1);
  background-color: var(--jp-layout-color2);
}

.jp-WWCExtension-tab.active {
  color: var(--jp-content-font-color1);
  border-bottom-color: var(--jp-brand-color1);
  font-weight: 600;

  /* Prevent layout shift by maintaining consistent spacing */
  letter-spacing: -0.01em;
}

.jp-WWCExtension-content {
  flex: 1;
  overflow-y: auto;
}

/* Search Bar Styles */
.jp-WWCExtension-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.jp-WWCExtension-input {
  flex: 1;
  min-width: 150px;
  padding: 12px 16px;
  border: 1px solid var(--jp-border-color1);
  border-radius: var(--jp-border-radius);
  font-size: var(--jp-ui-font-size2);
  background-color: var(--jp-layout-color0);
  color: var(--jp-content-font-color1);
  transition:
    border-color 0.2s ease-in-out,
    outline 0.2s ease-in-out;
}

.jp-WWCExtension-input:focus {
  outline: 1px solid var(--jp-brand-color1);
  outline-offset: -1px;
}

.jp-WWCExtension-select {
  padding: 6px 8px;
  border: 1px solid var(--jp-border-color1);
  border-radius: var(--jp-border-radius);
  font-size: var(--jp-ui-font-size1);
  background-color: var(--jp-layout-color0);
  color: var(--jp-content-font-color1);
  cursor: pointer;
  transition:
    border-color 0.2s ease-in-out,
    outline 0.2s ease-in-out;
}

.jp-WWCExtension-select:focus {
  outline: 1px solid var(--jp-brand-color1);
  outline-offset: -1px;
}

.jp-WWCExtension-button {
  padding: 12px 24px;
  border: 1px solid var(--jp-border-color1);
  border-radius: var(--jp-border-radius);
  background-color: var(--jp-brand-color1);
  color: var(--jp-ui-inverse-font-color1);
  font-size: var(--jp-ui-font-size2);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.jp-WWCExtension-button.jp-mod-muted:not(:disabled) {
  background-color: var(--jp-brand-color3);
  opacity: 0.7;
}

.jp-WWCExtension-button.jp-mod-muted-secondary:not(:disabled) {
  background-color: var(--jp-accent-color1);
  opacity: 0.7;
}

.jp-WWCExtension-button.jp-mod-muted-gray:not(:disabled) {
  background-color: var(--jp-layout-color3);
  color: var(--jp-ui-inverse-font-color1);
  border-color: var(--jp-border-color2);
}

.jp-WWCExtension-button:hover:not(:disabled) {
  background-color: var(--jp-brand-color0);
}

/* Paper Card Styles */
.jp-WWCExtension-papers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jp-WWCExtension-paper-card {
  padding: 12px;
  margin-bottom: 8px;
  background-color: var(--jp-layout-color0);
  border-left: 4px solid var(--jp-brand-color2);
  border-radius: var(--jp-border-radius);
  box-shadow: var(--jp-elevation-z1);
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-paper-card:hover {
  cursor: pointer;
  background-color: var(--jp-layout-color2);
  box-shadow: var(--jp-elevation-z4);
  transform: translateY(-2px);
}

.jp-WWCExtension-paper-card.jp-mod-selected {
  border-left-color: var(--jp-brand-color1);
  background-color: var(--jp-layout-color2);
}

.jp-WWCExtension-paper-title {
  margin: 0 0 8px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-ui-font-color1);
  line-height: 1.4;
}

.jp-WWCExtension-paper-title.jp-mod-clickable {
  cursor: pointer;
}

.jp-WWCExtension-paper-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-ui-font-color2);
  line-height: 1.5;
}

.jp-WWCExtension-paper-authors,
.jp-WWCExtension-paper-year,
.jp-WWCExtension-paper-citations {
  margin: 0;
}

.jp-WWCExtension-paper-abstract {
  margin: 8px 0;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-ui-font-color2);
  line-height: 1.5;
}

.jp-WWCExtension-paper-status {
  margin: 8px 0;
}

.jp-WWCExtension-pdf-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--jp-border-radius);
  font-size: var(--jp-ui-font-size0);
  font-weight: 500;
  line-height: 1.4;
}

.jp-WWCExtension-pdf-badge.jp-mod-has-pdf {
  background-color: var(--jp-success-color3);
  color: var(--jp-success-color0);
  border: 1px solid var(--jp-success-color1);
}

.jp-WWCExtension-pdf-badge.jp-mod-metadata-only {
  background-color: var(--jp-warn-color3);
  color: var(--jp-warn-color0);
  border: 1px solid var(--jp-warn-color1);
}

.jp-WWCExtension-paper-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.jp-WWCExtension-import-button {
  margin-top: 8px;
  width: 100%;
}

/* Error and Loading Styles */
.jp-WWCExtension-error {
  padding: 8px;
  margin-bottom: 16px;
  background-color: var(--jp-error-color3);
  color: var(--jp-ui-inverse-font-color1);
  border-radius: var(--jp-border-radius);
  font-size: var(--jp-ui-font-size1);
  line-height: 1.5;
}

.jp-WWCExtension-loading {
  padding: 16px;
  text-align: center;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  line-height: 1.5;
}

.jp-WWCExtension-empty {
  padding: 32px;
  text-align: center;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  line-height: 1.5;
}

/* Discovery and Library Tab Specific Styles */
.jp-WWCExtension-discovery,
.jp-WWCExtension-library {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.jp-WWCExtension-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Skeleton Loaders */
.jp-WWCExtension-skeleton {
  padding: 12px;
  border: 1px solid var(--jp-border-color1);
  border-radius: var(--jp-border-radius);
  background-color: var(--jp-layout-color1);
  animation: pulse 1.5s ease-in-out infinite;
}

.jp-WWCExtension-skeleton-title {
  height: 20px;
  width: 80%;
  background-color: var(--jp-border-color2);
  border-radius: var(--jp-border-radius);
  margin-bottom: 8px;
}

.jp-WWCExtension-skeleton-line {
  height: 14px;
  width: 100%;
  background-color: var(--jp-border-color2);
  border-radius: var(--jp-border-radius);
  margin-bottom: 4px;
}

.jp-WWCExtension-skeleton-line.short {
  width: 60%;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* PDF Upload Section */
.jp-WWCExtension-upload-section {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px dashed var(--jp-border-color1);
  border-radius: var(--jp-border-radius);
  text-align: center;
}

.jp-WWCExtension-upload-section label {
  margin: 0;
}

/* Detail View Styles */

.jp-WWCExtension-detail-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
}

.jp-WWCExtension-detail-header {
  margin-bottom: 16px;
}

.jp-WWCExtension-close-button {
  float: right;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--jp-content-font-color2);
  padding: 0;
  width: 32px;
  height: 32px;
  line-height: 32px;
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-close-button:hover {
  color: var(--jp-content-font-color1);
  background-color: var(--jp-layout-color2);
  border-radius: var(--jp-border-radius);
}

.jp-WWCExtension-detail-header h2 {
  margin: 0 0 8px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-content-font-color2);
  line-height: 1.5;
}

/* Tab containers */
.jp-WWCExtension-detail-tabs {
  display: flex;
  border-bottom: 1px solid var(--jp-border-color1);
  margin-bottom: 16px;
  gap: 8px;
}

.jp-WWCExtension-synthesis-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--jp-border-color1);
}

/* Tab buttons - specificity (0,2,0) - all grouped together */
.jp-WWCExtension-detail-tabs button {
  background: none;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-synthesis-tabs button {
  background: none;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-bottom-color 0.15s ease-in-out;
  font-weight: 500;
  min-width: fit-content;
}

/* Tab button hover states - specificity (0,2,1) - all grouped together */
.jp-WWCExtension-detail-tabs button:hover {
  color: var(--jp-content-font-color1);
  background-color: var(--jp-layout-color2);
}

.jp-WWCExtension-synthesis-tabs button:hover {
  color: var(--jp-content-font-color1);
  background-color: var(--jp-layout-color2);
}

/* Tab button active/selected states - higher specificity - all grouped together */
.jp-WWCExtension-detail-tabs button.active {
  color: var(--jp-content-font-color1);
  border-bottom-color: var(--jp-brand-color1);
  font-weight: 600;
}

.jp-WWCExtension-synthesis-tabs button.jp-WWCExtension-tab-active {
  color: var(--jp-brand-color1) !important;
  border-bottom: 3px solid var(--jp-brand-color1) !important;
  font-weight: 700 !important;
  background-color: var(--jp-brand-color3) !important;
  border-radius: var(--jp-border-radius) var(--jp-border-radius) 0 0;

  /* Prevent layout shift by maintaining consistent spacing */
  letter-spacing: -0.01em;
}

.jp-WWCExtension-detail-content {
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.jp-WWCExtension-detail-section {
  margin-bottom: 24px;
}

.jp-WWCExtension-detail-section h3 {
  margin: 0 0 8px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-detail-section p {
  margin: 0 0 8px;
  color: var(--jp-content-font-color2);
  line-height: 1.6;
}

.jp-WWCExtension-detail-section table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.jp-WWCExtension-detail-section th,
.jp-WWCExtension-detail-section td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid var(--jp-border-color1);
}

.jp-WWCExtension-detail-section th {
  font-weight: 600;
  color: var(--jp-content-font-color1);
  background-color: var(--jp-layout-color2);
}

.jp-WWCExtension-detail-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--jp-border-color1);
}

/* Multi-Select Styles */
.jp-WWCExtension-paper-card-selected {
  border-left-color: var(--jp-brand-color1);
  background-color: var(--jp-layout-color2);
}

.jp-WWCExtension-paper-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.jp-WWCExtension-paper-card-checkbox {
  flex-shrink: 0;
}

.jp-WWCExtension-checkbox {
  cursor: pointer;
}

.jp-WWCExtension-view-details-button {
  padding: 4px 12px;
  font-size: var(--jp-ui-font-size0);
  margin-left: auto;
}

.jp-WWCExtension-synthesis-button-container {
  margin-bottom: 16px;
  padding: 8px;
  text-align: center;
}

.jp-WWCExtension-synthesis-button {
  background-color: var(--jp-brand-color1);
  color: var(--jp-ui-inverse-font-color1);
  font-weight: 600;
  padding: 10px 20px;
}

/* WWC Co-Pilot Styles */
.jp-WWCExtension-wwc {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  padding-bottom: 32px;
  overflow-y: auto;
}

.jp-WWCExtension-wwc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--jp-border-color1);
}

.jp-WWCExtension-wwc-header h2 {
  margin: 0;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--jp-content-font-color2);
  padding: 0;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: var(--jp-border-radius);
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-close:hover {
  color: var(--jp-content-font-color1);
  background-color: var(--jp-layout-color2);
}

.jp-WWCExtension-wwc-judgments {
  margin-bottom: 24px;
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z1);
}

.jp-WWCExtension-wwc-judgments h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-wwc-field {
  margin-bottom: 16px;
}

.jp-WWCExtension-wwc-field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 500;
  color: var(--jp-content-font-color1);
  line-height: 1.5;
}

.jp-WWCExtension-wwc-field select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--jp-border-color1);
  border-radius: var(--jp-border-radius);
  font-size: var(--jp-ui-font-size1);
  background-color: var(--jp-layout-color0);
  color: var(--jp-content-font-color1);
  cursor: pointer;
  transition:
    border-color 0.2s ease-in-out,
    outline 0.2s ease-in-out;
}

.jp-WWCExtension-wwc-field select:focus {
  outline: 1px solid var(--jp-brand-color1);
  outline-offset: -1px;
}

.jp-WWCExtension-wwc-help {
  margin: 4px 0 0;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-content-font-color2);
  font-style: italic;
  line-height: 1.5;
}

.jp-WWCExtension-wwc-results {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z1);
}

.jp-WWCExtension-wwc-results h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-wwc-rating {
  padding: 12px;
  border-radius: var(--jp-border-radius);
  margin-bottom: 16px;
  text-align: center;
  color: white;
}

.jp-WWCExtension-wwc-rating.jp-type-meets-standards {
  background-color: var(--jp-success-color1);
}

.jp-WWCExtension-wwc-rating.jp-type-meets-with-reservations {
  background-color: var(--jp-warn-color1);
}

.jp-WWCExtension-wwc-rating.jp-type-does-not-meet {
  background-color: var(--jp-error-color1);
}

.jp-WWCExtension-wwc-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--jp-border-color2);
}

.jp-WWCExtension-wwc-section:last-child {
  border-bottom: none;
}

.jp-WWCExtension-wwc-section h4 {
  margin: 0 0 8px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-wwc-section p {
  margin: 4px 0;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  line-height: 1.5;
}

.jp-WWCExtension-wwc-justification {
  margin-top: 16px;
}

.jp-WWCExtension-wwc-justification h4 {
  margin: 0 0 8px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-wwc-justification ul {
  margin: 0;
  padding-left: 20px;
  color: var(--jp-content-font-color2);
  line-height: 1.5;
}

.jp-WWCExtension-wwc-justification li {
  margin-bottom: 4px;
}

/* Synthesis Workbench Styles */
.jp-WWCExtension-synthesis {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  overflow-y: auto;
}

.jp-WWCExtension-synthesis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--jp-border-color1);
}

.jp-WWCExtension-synthesis-header h2 {
  margin: 0;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-synthesis-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.jp-WWCExtension-synthesis-actions-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.jp-WWCExtension-synthesis-content {
  flex: 1;
  overflow-y: auto;
}

.jp-WWCExtension-synthesis-empty {
  padding: 32px 32px 48px;
  text-align: center;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  line-height: 1.5;
}

.jp-WWCExtension-synthesis-empty h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
}

.jp-WWCExtension-synthesis-empty p {
  margin: 12px 0;
  text-align: left;
}

.jp-WWCExtension-synthesis-empty ul {
  margin: 12px 0;
  padding-left: 24px;
  text-align: left;
}

.jp-WWCExtension-synthesis-empty li {
  margin: 8px 0;
}

.jp-WWCExtension-synthesis-empty-note {
  margin-top: 24px;
  padding-bottom: 24px;
}

/* Meta-Analysis View Styles */
.jp-WWCExtension-meta-analysis {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 16px;
}

.jp-WWCExtension-meta-analysis h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

/* Stat Cards Grid Layout */
.jp-WWCExtension-meta-analysis-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z2);
}

.jp-WWCExtension-meta-analysis-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: var(--jp-layout-color0);
  border-radius: var(--jp-border-radius);
  box-shadow: var(--jp-elevation-z1);
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-meta-analysis-stat:hover {
  box-shadow: var(--jp-elevation-z2);
  transform: translateY(-2px);
}

.jp-WWCExtension-meta-analysis-stat strong {
  color: var(--jp-content-font-color1);
  font-weight: 600;
  font-size: var(--jp-ui-font-size0);
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.4;
}

.jp-WWCExtension-meta-analysis-stat span {
  color: var(--jp-brand-color1);
  font-family: var(--jp-code-font-family);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.jp-WWCExtension-meta-analysis-plot {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z2);
}

.jp-WWCExtension-plot-image {
  max-width: 100%;
  height: auto;
}

.jp-WWCExtension-meta-analysis-plot h4 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-meta-analysis-studies {
  padding: 16px;
  padding-bottom: 32px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z2);
}

.jp-WWCExtension-meta-analysis-studies h4 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--jp-ui-font-size1);
}

.jp-WWCExtension-table thead {
  background-color: var(--jp-layout-color2);
}

.jp-WWCExtension-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--jp-content-font-color1);
  border-bottom: 2px solid var(--jp-border-color1);
  line-height: 1.4;
  white-space: nowrap;
}

.jp-WWCExtension-table td {
  padding: 8px 12px;
  color: var(--jp-content-font-color2);
  border-bottom: 1px solid var(--jp-border-color2);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  transition: background-color 0.2s ease-in-out;
}

.jp-WWCExtension-table td:first-child {
  max-width: 250px;
  min-width: 150px;
  word-break: break-word;
}

.jp-WWCExtension-table tbody tr:hover {
  background-color: var(--jp-layout-color2);
}

/* Conflict View Styles */
.jp-WWCExtension-conflicts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jp-WWCExtension-conflicts h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-conflicts-summary {
  padding: 12px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z1);
}

.jp-WWCExtension-conflicts-summary p {
  margin: 0;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  line-height: 1.5;
}

.jp-WWCExtension-conflicts-empty {
  padding: 32px;
  text-align: center;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size1);
  line-height: 1.5;
}

.jp-WWCExtension-conflicts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jp-WWCExtension-conflict-item {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  border-left: 4px solid var(--jp-error-color1);
  box-shadow: var(--jp-elevation-z1);
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-conflict-item:hover {
  box-shadow: var(--jp-elevation-z2);
}

.jp-WWCExtension-conflict-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--jp-border-color2);
}

.jp-WWCExtension-conflict-header strong {
  color: var(--jp-content-font-color1);
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  line-height: 1.3;
}

.jp-WWCExtension-conflict-header span {
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size0);
  font-family: var(--jp-code-font-family);
  line-height: 1.4;
}

.jp-WWCExtension-conflict-papers {
  margin-bottom: 12px;
  padding: 8px;
  background-color: var(--jp-layout-color2);
  border-radius: var(--jp-border-radius);
}

.jp-WWCExtension-conflict-papers div {
  margin: 4px 0;
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size0);
  line-height: 1.5;
}

.jp-WWCExtension-conflict-papers strong {
  color: var(--jp-content-font-color1);
  font-weight: 600;
}

.jp-WWCExtension-conflict-findings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jp-WWCExtension-conflict-findings div {
  padding: 8px;
  background-color: var(--jp-layout-color2);
  border-radius: var(--jp-border-radius);
  color: var(--jp-content-font-color2);
  font-size: var(--jp-ui-font-size0);
  line-height: 1.5;
}

.jp-WWCExtension-conflict-findings strong {
  color: var(--jp-content-font-color1);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.jp-WWCExtension-conflict-explanation {
  margin-top: 16px;
  padding: 12px;
  background-color: var(--jp-layout-color2);
  border-radius: var(--jp-border-radius);
  border-left: 3px solid var(--jp-brand-color1);
}

.jp-WWCExtension-conflict-explanation strong {
  color: var(--jp-content-font-color1);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  font-size: var(--jp-ui-font-size1);
}

.jp-WWCExtension-conflict-explanation p {
  margin: 8px 0;
  line-height: 1.6;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-content-font-color2);
}

.jp-WWCExtension-conflict-explanation ul {
  margin: 8px 0 8px 20px;
  padding-left: 0;
}

.jp-WWCExtension-conflict-explanation li {
  margin: 6px 0;
  line-height: 1.5;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-content-font-color2);
}

/* WWC Info Boxes Container */
.jp-WWCExtension-wwc-info-container {
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap between boxes when stacked */
}

/* Always-visible informational box */
.jp-WWCExtension-wwc-info-box {
  padding: 16px;
  background-color: var(--jp-info-color3);
  border: 2px solid var(--jp-info-color1);
  border-radius: var(--jp-border-radius);
  border-left-width: 4px;
  width: 100%;
}

/* Warning box - only shows when data is missing */
.jp-WWCExtension-wwc-warning-box {
  padding: 16px;
  background-color: var(--jp-warn-color3);
  border: 2px solid var(--jp-warn-color1);
  border-radius: var(--jp-border-radius);
  border-left-width: 4px;
  width: 100%;
}

/* When info box is followed by warning box, connect them seamlessly */
.jp-WWCExtension-wwc-info-box + .jp-WWCExtension-wwc-warning-box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

/* When warning follows info, remove bottom radius from info box */
.jp-WWCExtension-wwc-info-box:has(+ .jp-WWCExtension-wwc-warning-box) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

/* Shared content styling */
.jp-WWCExtension-wwc-info-content,
.jp-WWCExtension-wwc-warning-content {
  color: var(--jp-content-font-color1);
}

.jp-WWCExtension-wwc-info-content strong {
  color: var(--jp-info-color0);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  font-size: var(--jp-ui-font-size1);
}

.jp-WWCExtension-wwc-warning-content strong {
  color: var(--jp-warn-color0);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  font-size: var(--jp-ui-font-size1);
}

.jp-WWCExtension-wwc-info-content p,
.jp-WWCExtension-wwc-warning-content p {
  margin: 8px 0;
  line-height: 1.6;
  font-size: var(--jp-ui-font-size1);
}

.jp-WWCExtension-wwc-warning-content ul {
  margin: 8px 0 8px 20px;
  padding-left: 0;
}

.jp-WWCExtension-wwc-warning-content li {
  margin: 6px 0;
  line-height: 1.5;
}

.jp-WWCExtension-wwc-info-content code,
.jp-WWCExtension-wwc-warning-content code {
  background-color: var(--jp-layout-color2);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--jp-code-font-family);
  font-size: var(--jp-ui-font-size0);
}

/* WWC Wizard Progress Indicator */
.jp-WWCExtension-wwc-progress {
  margin-bottom: 24px;
}

.jp-WWCExtension-wwc-progress-bar {
  height: 4px;
  background-color: var(--jp-border-color2);
  border-radius: var(--jp-border-radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.jp-WWCExtension-wwc-progress-fill {
  height: 100%;
  background-color: var(--jp-brand-color1);
  transition: width 0.3s ease;
}

.jp-WWCExtension-wwc-steps {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.jp-WWCExtension-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: none;
  border: 2px solid var(--jp-border-color1);
  border-radius: var(--jp-border-radius);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-step:hover {
  background-color: var(--jp-layout-color2);
}

.jp-WWCExtension-step.active {
  border-color: var(--jp-brand-color1);
  background-color: var(--jp-brand-color3);
}

.jp-WWCExtension-step.completed {
  border-color: var(--jp-success-color1);
  background-color: var(--jp-success-color3);
}

.jp-WWCExtension-step .step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--jp-border-color2);
  color: var(--jp-content-font-color2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 4px;
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-step.active .step-number {
  background-color: var(--jp-brand-color1);
  color: white;
}

.jp-WWCExtension-step.completed .step-number {
  background-color: var(--jp-success-color1);
  color: white;
}

.jp-WWCExtension-step .step-label {
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-content-font-color2);
  text-align: center;
  line-height: 1.4;
}

.jp-WWCExtension-wwc-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--jp-border-color1);
}

.jp-WWCExtension-wwc-step-content {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z1);
}

.jp-WWCExtension-wwc-step-content h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

/* Subgroup Analysis Styles */
.jp-WWCExtension-subgroup-analysis {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 32px;
}

.jp-WWCExtension-subgroup-analysis h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-subgroup-overall {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z2);
}

.jp-WWCExtension-subgroup-overall h4 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-subgroup-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jp-WWCExtension-subgroup-results h4 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-subgroup-item {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z1);
  transition: all 0.2s ease-in-out;
}

.jp-WWCExtension-subgroup-item:hover {
  box-shadow: var(--jp-elevation-z2);
}

.jp-WWCExtension-subgroup-item h5 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-subgroup-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Bias Assessment Styles */
.jp-WWCExtension-bias-assessment {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.jp-WWCExtension-bias-assessment h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-eggers-test {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
}

.jp-WWCExtension-eggers-test h4 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
  grid-column: 1 / -1;
}

.jp-WWCExtension-eggers-interpretation {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--jp-border-color2);
}

.jp-WWCExtension-funnel-plot {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z2);
}

.jp-WWCExtension-funnel-plot h4 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

/* Sensitivity Analysis Styles */
.jp-WWCExtension-sensitivity-analysis {
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.jp-WWCExtension-sensitivity-analysis h3 {
  margin: 0 0 16px;
  font-size: var(--jp-ui-font-size2);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-sensitivity-overall,
.jp-WWCExtension-sensitivity-loo,
.jp-WWCExtension-sensitivity-influence {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  box-shadow: var(--jp-elevation-z2);
}

.jp-WWCExtension-sensitivity-overall h4,
.jp-WWCExtension-sensitivity-loo h4,
.jp-WWCExtension-sensitivity-influence h4 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

/* Findings Preview Styles */
.jp-WWCExtension-findings-preview {
  padding: 16px;
  background-color: var(--jp-layout-color1);
  border-radius: var(--jp-border-radius);
  border: 1px solid var(--jp-border-color1);
  margin-bottom: 16px;
  box-shadow: var(--jp-elevation-z1);
}

.jp-WWCExtension-findings-preview h4 {
  margin: 0 0 12px;
  font-size: var(--jp-ui-font-size1);
  font-weight: 600;
  color: var(--jp-content-font-color1);
  line-height: 1.3;
}

.jp-WWCExtension-finding-item {
  margin-bottom: 16px;
  padding: 12px;
  background-color: var(--jp-layout-color2);
  border-radius: var(--jp-border-radius);
}

.jp-WWCExtension-finding-item strong {
  color: var(--jp-content-font-color1);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  line-height: 1.3;
}

.jp-WWCExtension-finding-item ul {
  margin: 0;
  padding-left: 20px;
  color: var(--jp-content-font-color2);
}

.jp-WWCExtension-finding-item li {
  margin-bottom: 4px;
  line-height: 1.5;
}

/* WWC Badge Styles */
.jp-WWCExtension-wwcBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 8px;
  text-transform: uppercase;
  line-height: 1.4;
}

.jp-WWCExtension-wwcBadge.jp-type-meets-standards {
  background-color: var(--jp-success-color2);
  color: var(--jp-success-color0);
}

.jp-WWCExtension-wwcBadge.jp-type-meets-with-reservations {
  background-color: var(--jp-warn-color2);
  color: var(--jp-warn-color0);
}

.jp-WWCExtension-wwcBadge.jp-type-does-not-meet {
  background-color: var(--jp-error-color2);
  color: var(--jp-error-color0);
}

.jp-WWCExtension-wwcBadge.jp-type-not-assessed {
  background-color: var(--jp-layout-color3);
  color: var(--jp-ui-font-color2);
}

/* Utility Classes */
.jp-WWCExtension-file-input {
  display: none;
}

.jp-mod-file-upload-label {
  display: inline-block;
  cursor: pointer;
}

.jp-mod-high-difference {
  color: var(--jp-error-color1);
}
